确认框不工作jquery ui

时间:2016-01-12 07:08:29

标签: jquery jquery-ui

我试图在我的本地机器中复制这个小提琴http://jsfiddle.net/taditdash/vvjj8/但它的工作完全正常。当我单击是或否按钮时,即使在调试器控制台中也没有响应,也没有错误消息,我不知道我错过了什么。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  </head>
  <script type="text/javascript">
    $(function() {
      $("#dialog-confirm").html("Confirm Dialog Box");
      // Define the Dialog and its properties.
      $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
          "Yes": function () {
            $(this).dialog('close');
            callback(true);
          },
          "No": function () {
            $(this).dialog('close');
            callback(false);
          }
        }
      });
    });
    function callback(value) {
      if (value) {
        alert("Confirmed");
      } else {
        alert("Rejected");
      }
    }
  </script>
  <body>
    <div id="dialog-confirm"></div>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

您需要将z-index设置为.ui-dialog

.ui-dialog {z-index: 999;}

输出:http://output.jsbin.com/gixemolubu