1. Standard method
Copy code code as follows:
<script type = "text/javascript">
Function Openwin (src, width, height, showscroll) {
Window.showmodalDialog (SRC, "", "Location: No; Status: No; Help: No; Dialogwidth:"+Width+"; Dialogheight:"+Height+"; wscroll+";"; ");
}
</script>
Example: <span style = "cursor: pointer" onClick = "Openwin
('//www.vevb.com', '500px', '400px', 'no') "> Click </span>
2. It should be noted that Firefox does not support the function. The syntax it supports is
window.open
('Openwin.html', 'Newwin', 'MODAL = Yes, Width = 200, Height = 200, Resizable = No, ScrollBars = No');
3. How to automatically judge the browser
Copy code code as follows:
<input type = "Button" value = "Open the dialog box" onClick = "showdialog ('#')"/>/>
<Script language = "javascript">
<!--
Function ShowDialog (URL)
{{
if (document.all) // ie
{{
Feature = "Dialogwidth: 300px; Dialogheight: 200px; Status: NO; Help: No";
Window.showmodalDialog (url, null, feature);
}
else
{{
// ModelessDialog can replace modal with dialog = yes
Feature = "Width = 300, Height = 200, Menubar = NO, TOOLBAR = NO, LOCATION = NO,";;;;;
Feature+= "scrollbars = no, status = no, modal = yes";
Window.open (url, null, feature);
}
}
//->
</Script>
4. In IE, the modal dialog box will hide the address bar, while other browsers are not necessarily
[Note] In Google browser, the effect of this modal will also fail.
5. Generally, when the dialog box pops up, we all hope that the background of the entire father's page will become a translucent color, so that users can see that they cannot be accessed later.
After closing the dialog box, I hope to restore
How did this do?
Copy code code as follows:
/// Display the detailed information of a certain order, through a modal dialog box, and the screen will change color
Function ShowerDerDetails (Orderid) {
var url = "Details.aspx? Orderid =" + Orderid;
// $ ("Body"). CSS ("Filter", "Alpha (OPACITY = 20)");
// Filter: Alpha (OPACITY = 50)
$ ("body"). addclass ("body1");
ShowdetailsDialog (url, "600px", "400px", "yes");
$ ("body"). RemoveClass ("Body1");
}
In addition, there is a style table definition
.Body1
{{
background-color:#999999;
Filter: Alpha (OPACITY = 40);
}
Copy code code as follows:
< %@Page Language = "C#" AutoeEventwireup = "True" Codebehind = "Webform1.aspx.cs" Inherits = "Webapplication1.webform1" %>
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<Title> </title>
<Style Type = "Text/CSS">
.Body1 {{
background-color:#999999;
Filter: Alpha (OPACITY = 40);
}
</style>
<script src = "jquery.js" type = "text/javascript"> </script>
<script type = "text/javascript">
Function ShowDetailsDialog (SRC, Width, Height, Showscroll) {{
Window.showmodalDialog (SRC, "", "Location: NO; Status: No; Help: No; Dialogwidth:" + Width + "; Dialogheight:" + Height + "; Scroll + ";");
}
Function ShowerDerDetails (Orderid) {
var url = 'detachs.aspx? Orderid =' + Orderid;
$ ("body"). addclass ("body1");
ShowdetailsDialog (url, '500px', '400px', 'no');
$ ("body"). RemoveClass ("Body1");
}
</script>
</head>
<body>
<found id = "form1" runat = "server">
<div>
<span style = "cursor: pointer" onClick = "ShoworderDetails (11)"> Click </span>
</div>
</form>
</body>
</html>