Question

可能重复：
Custom alert using Javascript

我想创建一条确认消息 - “您要继续删除吗？[是]还是[否]”。

我有一个包含许多数据行的表，其中在特定行中单击了删除链接，该行中的数据将在数据库中删除。当用户单击删除选项时，我想首先显示确认消息，以便用户可以在删除之前验证其操作。

我如何使用java脚本和CSS动态地执行此操作？我不想使用alerBox（）因为它很丑陋而且非常不专业。

我目前正在为我的学校项目-jsp和Java Servlet工作。

希望任何专家都能帮助我。我喜欢这个论坛，因为这里的人非常乐于助人。谢谢！

Answer 1

由于JavaScript事件处理的工作方式，confirm不存在任何“插入式”替换，但jQuery UI等流行的JavaScript库包含可用于实现的“模态对话”功能类似的效果。

http://www.jensbits.com/2009/08/10/modal-confirmation-dialog-on-form-submit-javascript-jquery-ui-and-thickbox-varieties/是一个如何运作的例子。您的“删除”按钮不会设置为提交表单，而是打开模式对话框，如果用户单击“确定”，将提交表单。

Answer 2

其实你可以做到

window.alert = function(text) { /* some code to show a fancy dialog */};
window.confirm = function(question) { /* some code to show a fancy dialog and return the result */}

问题是你在弄乱哪里不应该乱用但是优点是即使在第三方代码中任何alert（）或confirmms（）都会出现，因为你的自定义对话框和代码将很容易阅读（而不是$ .dialog（{options}）只需使用普通警报（）或确认电话）

Answer 3

您可以为每个删除链接添加onclick="deleteRow(row_id, this)"。使用row_id假定表是从给定集动态生成的，并且您有一个标识符来提供和选择要删除的数据。 this对于使用Javascript删除<tr>非常有用。

哦，当然这个函数会弹出一个对话框。使用jQuery。

Answer 4

您可以尝试使用FaceBox和FacyBox

http://chriswanstrath.com/facebox/

http://www.bitbonsai.com/facybox/

Answer 5

您可以重写功能。我打算你想知道发生了什么以及如何实现效果，而不是使用像jQuery这样的库。 jQuery和派生解决方案可以让您的生活更轻松，但如果您想知道如何制作它，请继续阅读。

首先，您应该创建自己的“alertBox”，使用您喜欢的CSS样式（包括它的位置）[我建议位置绝对，z-index：2]，然后在CSS中将其显示属性隐藏。

好的，现在当用户点击你的删除链接/按钮时，你会触发一个原生的javascript确认对话框。将此确认呼叫替换为将显示您自己的样式菜单的功能。将其CSS显示属性从隐藏更改为“阻止”。

在您自己设置的菜单按钮上是/否，附加事件，每个按钮一个，具有相应的操作（隐藏菜单或删除行，从表中删除当前行...）。

嗯，这就是主意。希望你喜欢。

Answer 6

如果你真的想要看起来很好试试这种方法：例如使用jQuery和jQueryUI。

在你的页面中输入：

<head>
<link rel="stylesheet" type="text/css" media="all" href="pathtoyourappfolder/jquery/css/black-tie/jquery-ui-1.8.4.custom.css" />
<script type="text/javascript" src="pathtoyourappfolder/jquery/js/jquery-1.4.2.min.js'" ></script>
<script type="text/javascript" src="pathtoyourappfolder/jquery/js/jquery-ui-1.8.4.custom.min.js'" ></script>
</head>
<body>
  <div id="dialog-confirm" title="DELETE">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Are you sure you want to delete this record?</p>
  </div>

  <table id="TblName">
    <tr>
        <td class="actions">
            <a href="http://something/somethingelse/1" class="del">del</a>
        </td>
        <td>...</td>
    </tr>
    <tr>
        <td class="actions">
            <a href="http://something/somethingelse/2" class="del">del</a>
        </td>

        <td></td>
    </tr>   
  </table>

<script language="javascript" type="text/javascript">

 $(document).ready(function() {

        $('#TblName td.actions a.del').click(function(event){
            $("#dialog-confirm").dialog('open');
        });

 }

</script>
</body>

可以替换alerbox的Javascript和CSS。 Alert Box是如此不专业

6 个答案: