[JavaScript] ASP.NET uses iframe created class MODAL window

xiaoxiao2021-03-06  50

We often have to use the modal window in the program's human-computer, but in B / S development, it is not easy, although it can also be implemented with a Window.ShowModalDialog function (see http: //dotnet.aspx .cc / showdetail.aspx? id = 49ml4ao8-5pb3-4kny-njzd-ljioxv4m1x4), but most of them use trouble, but also to establish 2 useless windows for the return value. accurate!

I have found that you can try to embed an IFRAME in the initial page, then use iframe to display a page, and set the iframe to place it in absolute position, z-index is set to the highest 9999, so you can overwrite this page in the initial On the interface, when you need to display the modal window, you will display this iframe, you can enlarge the size of the IFRAME to cover the initial window, or you can cover the key item, the purpose is to do so changes in the back window. When the window displayed in the iframe needs to be closed, you can hide the iFrame on it. When the actual test, IFRAME Diaplay cannot be changed at the sub-window, so we also need to put iframe in a DIV, control the display of the DIV, can control the appearance or hide of the window. But why not use DIV to display the window, there are two reasons: 1.DIV cannot block the DropDownList control behind it, and iframe can. 2. Not easy to place the content in the window into a separate web page, and the reuse is poor.

The following is the code, showing the hidden use of both client and server code:

Webform1.aspx

<% @ Page language = "c #" codebehind = "Webform1.aspx.cs" autoeventwireup = "false" inherits = "wsteri1.webform1"%> Webform1 </ title> <meta name =" generator "content =" Microsoft Visual Studio .NET 7.1> <meta name = "code_language" content = "c #"> <meta name = "vs_defaultClientScript" content = "JavaScript"> <meta name = "vs_targetSchema" content = "http://schemas.microsoft.com/intellisense/ie5"> <script language = "javascript"> function showLayer () {document .all.myformlayer.style.display = '; return false;} function seturl (url) {document.all.iframe1.src = url;} </ script> </ head> <body ms_positioning = "gridlayout> < Form id = "form1" method = "post" runat = "server"> <font face = "Song"> <ask = "DropdownList1" style = "z-index: 101; Left: 40px; position: absolute ; TOP: 208PX "Runat =" server "width =" 184px "> <ask: listitem value =" test1 "> q </ asp: listitem> <ask: listitem value =" test2 "> w </ as P: ListItem> <asp: listitem value = "test3"> E </ asp: listitem> <ask: listitem value = "test4"> r </ asp: listitem> </ ask: DropDownList> </ font> <input> <file> <input TYPE = "button" name = "mybutton" value = "test" id = "</p> <p>MyButton "οnclick =" ShowLayer (); set = "z-index: 102; Left: 360px; position: absolute; top: 336px"> <div id = "MyFormlayer" Style = " Display: none; z-index: 103; Left: 16px; width: 408px; position: absolute; top: 24px; height: 304px> <iframe scrolling = "no" frameborder = "0" width = "100%" Height = "100%" ID = "iframe1" runat = "server"> </ iframe> </ div> <asp: button id = "Button2" style = "z-index: 104; Left: 256px; position: absolute; Top: 336px "Runat =" Server "text =" aspxtest "> </ ask: button> </ form> </ body> </ html> Webform1.aspx.cs</p> <p>.... public class WebForm1: System.Web.UI.Page {protected System.Web.UI.WebControls.DropDownList DropDownList1; protected System.Web.UI.HtmlControls.HtmlGenericControl IFRAME1; protected System.Web.UI.WebControls.Button button2; private void Page_Load (object sender, System.EventArgs e) {// Put user code to initialize the page here if {} (IsPostBack!)} public static void CreateScript (System.Web.UI.Page mypage, string strScript , string ID) {string strscript = "<script language = 'javascript'>"; strscript = strScript; strscript = "</ script>"; if) mypage.RegisterStartupScript (ID, (mypage.IsStartupScriptRegistered (ID!) STRScript);} private void button2_click (object sender, system.eventargs e) {iframe1.attributes.add ("src", "Webform2.aspx? Name = 'China'"); CreateScript (Page, "Showlayer ();" , "Show");}}</p> <p>Webform2.aspx</p> <p><% @ Page language = "c #" codebehind = "Webform2.aspx.cs" autoeventwireup = "false" inherits = "wsteri1.webform2"%> <! Doctype html public "- // w3c // DTD HTML 4.0 Transitional // En "> <html> <head> <title> Webform2 </ title> <meta name =" generator "content =" Microsoft Visual Studio .NET 7.1> <meta name = "code_language" Content = "C #"> <meta name = "vs_defaultClientScript" content = "JavaScript"> <meta name = "vs_targetSchema" content = "http://schemas.microsoft.com/intellisense/ie5"> <script language = "javascript"> function hide () {parent .Myformlayer.style.display = "none";} </ script> </ head> <body ms_positioning = "gridLayout> <form id =" form2 "method =" post "runat =" server "> <table border = "0" width = "100%" cellspacing = "0" cellpadding = "0" bgcolor = "# 6887bb" height = "100%" ID = "table1" style = "border-Top-style: outset; border-rot -Style: outset; border-left-style: outset; border-bottom-style: outset> <tr> <td> <td> <td> </ td> <td> </ td> </ tr> <TR> <TD> </ TD> <TD> <p align = "center"> <font color = "# ffffff"> Imitation modal window effect </ font> </ p> <p align = "center"> <input type = "button" οnclick = "hide ()" style = "width: 80px"</p> <p>Value = "Click to close"> <askTON ID = "button1" runat = "server" text = "asptest"> </ asp: button> </ p> </ td> <td> </ td> </ Tr> <TD> <TD> <TD> <TD> </ TD> <TD> </ TD> </ TD> </ Table> </ form> </ body> </ html> WebFom2.aspx. cs</p> <p>Namespace WSGUI1 {/// <summary> /// WebForm2 summary description. /// </ summary> public class WebForm2: System.Web.UI.Page {protected System.Web.UI.WebControls.Button Button1; private void Page_Load (object sender, System.EventArgs e) {// is placed here The user code is initialized page if (! Ispostback) {Button1.attributes.Add ("OnClick", "HIDE ()");}}}</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-40736.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="40736" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.035</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = '6qHew2z94GZeGQxaPn8RgR5Mr3cRLA8evsOEsg07rV_2BMkodAxYWLo742bifPeNs11SW7_2F2Q9KE94EUH3KpIufA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>