Fatal编程技术网
  • javascript/
  • Javascript jquery中的自定义警报和确认框

Javascript jquery中的自定义警报和确认框

javascript jquery

Javascript jquery中的自定义警报和确认框,javascript,jquery,Javascript,Jquery,在jquery中是否有任何警报和确认对话框，其中包含自定义标题和自定义内容。我已经搜索了很多网站，但找不到合适的。任何站点链接或任何内容都是值得欣赏的。您可以使用JQuery UI的对话框小部件 jQuery UI有自己的元素，但只有jQuery没有 工作示例： <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI

在
jquery
中是否有任何
警报
和
确认
对话框，其中包含自定义标题和自定义内容。我已经搜索了很多网站，但找不到合适的。任何站点链接或任何内容都是值得欣赏的。

您可以使用JQuery UI的对话框小部件

jQuery UI有自己的元素，但只有jQuery没有

工作示例：

<!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>


jQuery UI对话框-默认功能
$（函数（）{
$（“#dialog”）.dialog（）；
});
这是用于显示信息的默认对话框。可以使用“x”图标移动、调整和关闭对话框窗口
检查JSFIDLE并单击delete

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));
})

功能是对话框（按钮1、按钮2、元素）{
var btns={}；
btns[button1]=函数（）{
元素。父元素（'li'）.hide（）；
$（此）.dialog（“关闭”）；
};
BTN[button2]=函数（）{
//无所事事
$（此）.dialog（“关闭”）；
};
$（“”）。对话框({
自动打开：对，
标题：“条件”，
莫代尔：是的，
按钮：BTN
});
}
$（'.delete'）。单击（函数（）{
yesnodialog（‘是’、‘否’、$（此））；
})
这将有助于您

我使用
jqueryui
组件定制messagebox。这是演示

您只需传递标题名称、消息、按钮文本等参数。您可以在单击任何按钮时指定触发功能。这将对您有所帮助。

试着使用它的最佳功能。 您将获得大量的定制和灵活性

确认示例

您需要处理jquery对话框除了可能存在的特定于浏览器的解决方案外，您将无法手动设置
警报
和
确认
框的样式。但它不会阻止代码。警报获取后的As语句仅在按下“Ok”键时执行。我看到的是空白而不是图像。您能解释一下原因吗？@partho：若您看到控制台，您的页面中有10个错误，即图像文件未在浏览器中下载。确保文件夹中有这些文件。例如，
加载资源失败：服务器响应状态为404（未找到）http://code--projects.com/custom-dialog/images/ui-icons_222222_256x240.png 加载资源失败：服务器响应状态为404（未找到） http://code--projects.com/custom-dialog/images/ui-bg_highlight-hard_100_f9f9f9_1x100.png 加载资源失败：服务器响应状态为404（未找到）
很好，但也会影响我的div！当它弹出时，我的分区位置发生了变化。 
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()
);