Javascript 模态窗口创建_Javascript

Javascript 模态窗口创建

javascript

Javascript 模态窗口创建,javascript,Javascript,我正在尝试创建一个模式窗口，因此我编写了以下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"> $(fu

我正在尝试创建一个模式窗口，因此我编写了以下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>


$（函数（）{
$（“#btn显示模式”）。单击（功能（e）{
e、 预防默认值（）；
$（“#对话框示例”）.modal（'show'）；
});
});

我的模态对话框
这是一个模态体

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

两件事：

您没有关闭
-标记
不要在模态
上设置
```
隐藏
```
-属性，否则只会显示背景

我已经删除了jQuery代码，并将其切换到Bootstrap首选的声明式样式，请在此处查找：-如果您想坚持命令式样式，那么在关闭

-标记后，您的代码应该仍然可以工作

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

     });

JavaScript控制台怎么说？您试图调用未定义的函数modal（）。您可能缺少对定义了此函数的jquery插件的依赖关系。self：输出在browser@Petr：我尝试使用code.jquery.com/jquery-1.9.1.js“>但仍然没有得到任何结果output@PetrHejda他包括bootstrap.min.js，它定义了

.modal（）

method。他的代码中还有其他问题。