Question

这里我使用的是jquery对话框，但是我必须禁用我的后台内容，这样用户就无法点击任何按钮或无法选择任何内容。

但是如何做到这一点。

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>jQuery UI Dialog - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>
    $(function() {
    $( "#dialog" ).dialog();
    });
    </script>
    </head>
    <body>
    <div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    </body>
    </html>

Answer 1

在对话框中设置modal: true：

$("#dialog").dialog({
    modal: true
});

Answer 2

您可以使用内置的modal选项。

$( "#dialog" ).dialog({
     modal: true
});

Answer 3

$( "#dialog" ).dialog({
     modal: true
});

Answer 4

将modal: true 选项添加到dialog，

$(function() {
   $( "#dialog" ).dialog({
       modal: true
   });
});

阅读 dialog/#modal

禁用所有背景内容的概念

4 个答案: