Question

我正在尝试创建一个模态窗口，因此我编写了以下HTML文件

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>


<script type="text/javascript">

$(function() {
$("#btn-show-modal").click(function(e) {
e.preventDefault();
$("#dialog-example").modal('show');
});
});


</head>
<body>

<p> <a href="#" id="btn-show-modal">Show modal dialog </a>  
<div id="dialog-example" class="modal hide"> 
        <div class="modal-header">  
        <h1>My Modal Dialog</h1>
        </div>

        <div class="modal-body">  
        <p>This is a modal body</p>
        </div>

        <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save</a>
        </div>
</div>

</body>
</html>

但是在浏览器上运行HTML页面后，我无法获得任何对话框。我的要求是让对话框和对话框在10秒后关闭。

Answer 1

两件事：

您没有关闭<script> - 标记
不要在模式hide上设置<div id="dialog-example"> - 属性，否则只会显示背景。

我删除了jQuery代码并将其切换为Bootstrap首选的声明式样式，在此处找到它：https://jsbin.com/fusirecowa/edit?html,output - 如果你想坚持命令式样式，你的代码应该在关闭之后仍然有效<script> - 标记

<body>
    <p> <a href="#" id="btn-show-modal" data-toggle="modal" data-target="#dialog-example">Show modal dialog </a>  
    <div id="dialog-example" class="modal"> 
            <div class="modal-header">  
            <h1>My Modal Dialog</h1>
            </div>

            <div class="modal-body">  
            <p>This is a modal body</p>
            </div>

            <div class="modal-footer">
            <a href="#" class="btn">Close</a>
            <a href="#" class="btn btn-primary">Save</a>
            </div>
    </div>
</body>

Answer 2

感谢您的帮助。我能够通过使用以下

来实现

//alert("entering");
  $("#dialog").dialog({
         modal: true,
         //title: "Confirm",
         resizable: false,
         width: 300,
         height: 150,
         open: function (event, ui) 
         {
               setTimeout(function () { $("#dialog").dialog("close");}, 5000);
               alert("entering again");
               //sleep(5000);
         },
         buttons: {
             Ok: function () {
                // $(this).dialog("close"); //closing on Ok
             },
             Cancel: function () {
                // $(this).dialog("close"); //closing on Cancel
             }
         }

     });

模态窗口创建

2 个答案: