logo标签列表

JavaScript 确认退出按钮

javascripthtmlcss
3
我是一名新手网站开发者，正在尝试开发一个网站。我使用HTML和JavaScript来完成任务，但我遇到了麻烦。通过查看在线示例，我成功创建了一个OK/Cancel按钮。现在我想使用CSS创建相同类型的按钮，因为我不想在每个页面上都写入相同的代码。是否可以使用CSS实现此目的？如果可以，请问有人可以向我展示如何做吗？
这是我拥有的用于按钮的代码，顺便说一下，它运行得很好：
<html>
   <body>
     <script type="text/javascript">
        if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
        {         
           window.location="http://google.com";
        }
        else
        {         
           window.location= "http://www.myWebPage.com";
        }
      </script>
   </body>
</html>

谢谢。
6个回答
2
据我所知，您无法使用CSS进行此操作，但您不需要。也不需要在每个页面上使用JavaScript编写相同的代码。您可以在页面中包含外部JavaScript文件，如下所示：
<script type="text/javascript" src="external.js"></script>

虽然你说自己没有太多经验，但你已经自己发现了DRY（不要重复自己）原则。

1

说实话，我觉得你有点混淆了。如果要用CSS实现这个功能会更难（需要使用div来隐藏/显示，并提供退出或停留的选项）。更简单的方法是：

你可以在JavaScript中创建一个函数，例如：

function closeWindow(){
   if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))
   {         
      window.location="http://google.com";
   }
      else
   {         
      window.location= "http://www.myWebPage.com";
   }
}

然后将其放入 .js 文件中，您可以使用 this 在任何页面上包含此文件，并在任何页面上调用它，例如：

<a href="javasctipt:closeWindow();">Close Window</a>
1

这不能使用CSS完成，但是您可以将JavaScript放在外部文件中（例如confirm.js），然后将其放置在每个页面的底部，如下所示：


<html>
   <body>
     <script type="text/javascript" src="confirm.js"> </script>
   </body>
</html>

Your confirm.js would look like:

如果(confirm("按'确定'离开永恒测试，或者按'取消'留下: ")) {
window.location="http://google.com"; } else {
window.location= "http://www.myWebPage.com"; }

1
您可以通过CSS创建一个按钮样式，该样式可以在多个页面上使用，并引用该CSS文档。同样，您也可以将JavaScript放置在外部文档中，并在多个页面上引用该代码。
1
创建一个名为“exit.js”的脚本，其中包含标签之间的代码，然后在所有页面中使用<script type="text/javascript" src="/exit.js"> </script>引用该脚本。
0

你不能通过CSS让浏览器执行alert/confirm。

提示：如果if/else块中只有一行代码，则不需要使用{}。

    <html>
   <body>
     <script type="text/javascript">
        if (confirm("Press 'OK' to leave the Eternity Test, or 'Cancel' if you want to stay: "))       
           window.location="http://google.com";
        else     
           window.location= "http://www.myWebPage.com";
      </script>
   </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接