模式窗口创建

Modal Window creation

本文关键字：创建 窗口 模式      更新时间：2023-09-26

我正在尝试创建一个模态窗口，所以我写了以下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 秒后关闭。

两件事：

  • 您没有关闭<script>标签

  • 不要在模态<div id="dialog-example">上设置 hide -属性，否则只会显示背景。

我已经删除了jQuery代码并将其切换到Bootstrap首选的声明式样式，在这里找到它： https://jsbin.com/fusirecowa/edit?html,output - 如果你想坚持命令式风格，你的代码在你关闭<script> -tag后应该仍然可以工作。

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

感谢您的帮助。我能够使用以下方法实现

//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
             }
         }
     });
相关文章：