Question

我有一个按钮，当点击按钮时，背景应该变暗，弹出模式将会出现。

我是C＃的新手，到目前为止我已经来了这个：

<html>
<head>
    <title>Create new user / Edit user</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
</head>
<body>
    <h4>User Management Module</h4>
    <button id="opener">New User</button>
    <div id="wrapper">
        <p><asp:Label id="lbl1" runat="server" /></p>
        <p>Username</p>
        <form id="Form1" runat="server">
            <asp:TextBox runat="server" id="TextBox1"/>

            <p>Password</p>
            <asp:TextBox runat="server" id="TextBox2"/>
            <p>E-mail</p>
            <asp:TextBox runat="server" id="TextBox3"/>
        </form>
    </div>
    <p></p>
    <button id="Button.edit">Edit User</button>
    <div id="Div1"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#wrapper').dialog({
                autoOpen: false,
                title: 'Create new user'
            });
            $('#opener').click(function () {
                $('#wrapper').dialog('open');
                // $('h4').fadeOut();
                // return false;
            });
        });
    </script>
</body>
</html>

首先我使用过：

$('h4').fadeOut();

但这有助于删除或隐藏。我无法实现叠加层。谢谢。

Answer 1

通常，我会使用Block UI plugin。它可以处理所有乱七八糟的跨浏览器CSS内容，这些内容会导致您自己编写UI组件拦截器，因此您不必这样做！

Answer 2

要放置此语法：

modal: true,

进入这里：

$(document).ready(function () {

        $('#wrapper').dialog({

            modal: true,  //blur, darkened
            autoOpen: false,
}
        });

会使背景暗淡/模糊。这也将阻止内容操纵。

在jQuery中弹出对话框后变暗的背景

2 个答案: