logo标签列表

jQuery中的自定义警告和确认框

javascriptjquery
17

在 jQuery 中是否有自定义标题和内容的 alert 和 confirm 对话框可用。我已经搜索了许多网站，但没有找到合适的。欢迎提供任何网站链接或内容。

你需要处理 jQuery 对话框。 - Rajaram Shelar
1
除了可能存在的特定于浏览器的解决方案外，您将无法手动样式化“alert”和“confirm”框。 - Constantinius
5个回答
16

我使用了 jquery UI 组件制作了自定义的消息框。这里是演示：http://jsfiddle.net/eraj2587/Pm5Fr/14/

你只需传递标题、消息和按钮文本等参数即可。您可以在任何按钮点击时指定触发函数。这将有助于您。

4
但它不会阻止代码运行。在弹出警告框后，只有在用户点击“确定”之后才会执行后续语句。 - Hemant Malpote
我在这个网址 http://code--projects.com/custom-dialog/ 上看到的是空白而不是图片。你能解释一下为什么吗？ - partho
1
@partho：如果你看到控制台，你的页面有10个错误，即图片文件未在浏览器中下载。确保你在文件夹中有这些文件。例如：Failed to load resource: the server responded with a status of 404 (Not Found) http://code--projects.com/custom-dialog/images/ui-icons_222222_256x240.png Failed to load resource: the server responded with a status of 404 (Not Found) http://code--projects.com/custom-dialog/images/ui-bg_highlight-hard_100_f9f9f9_1x100.png Failed to load resource: the server responded with a status of 404 (Not Found) - Rajaram Shelar
11

试试使用SweetAlert，它是最好的选择。 您将获得很多自定义和灵活性。

确认示例

sweetAlert(
  {
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",   
    showCancelButton: true,   
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!"
  }, 
  deleteIt()
);

示例警报

这很不错，但它也影响了我的 div！当它弹出时，我的 div 位置会发生变化。 - Shankar
3

请查看jsfiddlehttp://jsfiddle.net/CdwB9/3/并单击删除。

function yesnodialog(button1, button2, element){
  var btns = {};
  btns[button1] = function(){ 
      element.parents('li').hide();
      $(this).dialog("close");
  };
  btns[button2] = function(){ 
      // Do nothing
      $(this).dialog("close");
  };
  $("<div></div>").dialog({
    autoOpen: true,
    title: 'Condition',
    modal:true,
    buttons:btns
  });
}
$('.delete').click(function(){
    yesnodialog('Yes', 'No', $(this));
})

这将对你有所帮助

2
1

jQuery UI 有自己的元素，但是仅使用 jQuery 是没有的。

http://jqueryui.com/dialog/

工作示例：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接