During this period of development, the JQuery pop-up dialog box is used, and the background is grayed out. I would like to share with you.
First look:
The Code is as follows:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script src = "js/jquery-1.9.1.js"> </script>
<Script src = "js/jquery-ui.js"> </script>
<Link rel = "stylesheet" type = "text/css" href = "css/jquery-ui.css">
<Title> JQuery pop-up box, with the background grayed out </title>
<Script type = "text/javascript">
$ (Document). ready (function (e ){
$ ("# Reviews"). bind ('click', function (event ){
$ ("# CheckandPass"). dialog ({
AutoOpen: true,
Width: 765,
Show: "blind ",
Hide: "explode ",
Modal: true, // set the gray background
});
$ ("# CheckandPass"). dialog ("open ");
Return true;
});
});
</Script>
</Head>
<Body>
<Div>
<Input type = "button" id = "reviews" value = "Click me"/>
</Div>
<Div id = "checkandPass" title = "comment" style = "display: none;">
<Form id = "passideas_true" method = "post" enctype = "multipart/form-data">
<Div>
<Textarea style = "width: 100%; height: 90%; min-height: 100px;"> </textarea>
</Div>
<Div style = "margin-top: 20px; text-align: center;">
<Button style = "height: 30px; width: 80px;" type = "button" id = "upfpass_true"> OK </button>
<Button style = "height: 30px; width: 80px;" id = "sb"> cancel </button>
</Div>
</Form>
</Div>
</Body>
</Html>
Make sure it is the effect you want.