Darkened background after pop-up the dialog in jQuery

StackOverflow https://stackoverflow.com/questions/22801369

  •  25-06-2023
  •  | 
  •  

سؤال

I have a button, and when the button is clicked, the background supposed to be darkened and pop-up modal will come.

I am very new in C# and i have come this so far:

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

First i have used:

$('h4').fadeOut();

But this is something like helps to remove or hide. I am failed implementing overlay. Thank you.

هل كانت مفيدة؟

المحلول 2

To place this syntax:

modal: true,

into here:

$(document).ready(function () {

        $('#wrapper').dialog({

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

will make background darkened/blur. That will also block the content to manipulate with.

نصائح أخرى

Generally, I use the Block UI plugin for this. It handles all the messy cross-browser CSS stuff you'll run into rolling out your own UI component blocker so you don't have to!

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top