Не работает модальная функция диалога JQueryUI - PullRequest
0 голосов
/ 15 февраля 2019

Я довольно долго пытался заставить модальную опцию диалога работать, но до сих пор не понял, что пошло не так и почему она не работает для меня.

Пробовал смотреть на другиесообщения на 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>

Надеюсь, что кто-то поможет мне.

1 Ответ

0 голосов
/ 15 февраля 2019

Я рекомендую 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>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...