Question

我已经尝试使对话框模式选项工作了一段时间，但仍然没有弄清楚出什么问题以及为什么它对我不起作用。

试图查看stackoverflow上的其他帖子以及jQueryUI官方网站上的对话框小部件页面，但我仍然无法解决。

这是我的代码：

<link type="text/css" rel="stylesheet" href="JQueryUI-1.12.1/jquery- 
ui.css"
<link type="text/css" rel="stylesheet" href="JQueryUI-1.12.1/jquery- 
ui.structure.css">
<link type="text/css" rel="stylesheet" href="JQueryUI-1.12.1/jquery- 
ui.theme.css">

</head>
<body>
<div id="container">

<div id="messageBox" title="Message">
<p> Thank you for visiting our website </p>
</div>

</div>


<script src="JQuery-3.3.1-Library.js"></script>
<script src="JQueryUI-1.12.1/jquery-ui.js"></script>
<script>

$("document").ready(function(){

$("#messageBox").dialog({show: {effect: "bounce", duration:1500}})
        .dialog({hide: {effect: "explode", duration:1500}})
        .dialog({closeOnEscape: false})
        .dialog({modal:true});

</script>
</body>

希望有人会帮助我。

Answer 1

我建议使用CDN而不是本地文件（这不能解决您的问题，但可能会带来一些好处，请阅读this以获取更多信息，而您错过了一个“}）；”

我测试了此代码，它可以正常工作，检查chrome控制台上是否有任何错误，并告诉我们是否有

<body>
       <div id="container">
           <div id="messageBox" title="Message">
                <p> Thank you for visiting our website </p>
           </div>
       </div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
    crossorigin="anonymous"></script>
<script>
    $("document").ready(function () {

        $("#messageBox").dialog({
                show: {
                    effect: "bounce",
                    duration: 1500
                }
            })
            .dialog({
                hide: {
                    effect: "explode",
                    duration: 1500
                }
            })
            .dialog({
                closeOnEscape: false
            })
            .dialog({
                modal: true
            });
    }); // you missed this
</script>

JQueryUI对话框模态函数不起作用

1 个答案: