We know if we want to use the Modal dialog box in the BS system, we must use the WINDOW.SHOWMODALDIALOG () method, showModalDialog () method is used to create a modal dialog box showing HTML content, this document is used Solution to issues generated when using ShowModalDialog () to produce a modal dialog box, this document applies to ASP, PHP, JSP and other web technology, and I will use JSP below. Note: This document does not involve the showModalDialog () method, please refer to the MSDN document, and the document with Kingerq users http://dev.9cbs.net/develop/Article/44/44896.shtm
We first write a very familiar use of SHOWMODALDIALOGOG (), we rewrite the alert () method of WINDOW in JavaScript. We do what we do first is to create a file alert.jsp code is: <% @ Page ContentType = "text / html; charset = GBK" language = "java" pageEncoding = "gbk"%> <% request.setcharacterencoding ("gbk"); string msg = request.getParameter ("msg");%>
# Your system name # --------------------------- </ title> <meta http -Equiv = "Content-Type" Content = "text / html; charSet = UTF-8"> <script language = javascript> function findenter () {if (event.keycode == 13) Window.close (); / script> </ head> <body οNKEYDοWN = JavaScript: Findenter ();> <center> <div sty = "overflow: auto; height: 60px" align = "center"> <% = msg%> </ div> <Input Type = Button Value = "OK" οnclick = "JavaScript: window.close ();"> </ center> </ body> </ html></p>
<p>Then add one of the following methods in your BS system's Unit.js (MSG) {var w = 250; var h = 150; POSLEFT = (Screen.Width-W) / 2POSTOP = (Screen.Height-h) / 2ShowModalDialog ("lert.jsp?msg= " msg," "" status: no; Dialoghem: " h " PX; DialogWidth: " w " PX; status: no; scroll: no; dialogtop: " POSTOP " PX; Dialogleft: " POSLEFT " PX '); The JSP dialog box. Use this method, we can use the ShowModalDialog method in our system to rewrite the default prompt box of IE, Window.Alert (), Window.confirm (), Window.Prompt (), etc., Such a system's UI style has been unified and more beautiful. Use ShowModalDialog Simulation Alert is his simplest application, and most of the BS system uses the purpose of using the modal dialog in the BS system to have a list of list list. Jsp, we want Double-click a record of the list. JSP to pop up the edit.jsp, edit this record, this time the problem is coming, the file in the modal dialog is not reloaded, that is, if we When using the <form> POST to Save.jsp in edit.jsp file, Save.jsp does not appear in the modal dialog, but a new IE window, which is obviously unbearable. The problem is like this: We create a middle page such as openwindow.jsp We want to call ShowModalDialog to open the openwindow.jsp page when you open Edit.jsp in the Modal dialog box, and put the edit.jsp's file name through the GET method Pass to OpenWindow.jsp. In the OpenWindow.jsp page, create an iframe to load the incoming URL address edit.jsp. At this time, no matter how refresh in the Edit.JSP page, how to POST, will be old and old The following is the code implemented in the modal dialog box: OpenWindo w.jsp <% @ page contenttype = "text / html; charset = GBK" language = "java" pageEncoding = "gbk"%> <% request.setCharacterencoding ("gbk"); response.addheader ("cache-control" "no-cache"); response.addheader ("expires", "THU, 01 JAN 1970 00:00:01 GMT"); string dlgurl = request.getParameter ("URL"); string dlgtitle = request.getParameter "Title");%> <html> <head> <title> <% = dlgtitle%> </ title> </ head> <body leftmargin = 0 TopMargin = 0> <iframe scroll =</p>
<p>None width = 100 frameborder = 0 scrolling = no height = 100 src = <% = dlgurl% >> </ iframe> </ body> </ html> Add function Function Showm in Unit.js (Title, URL, OBJ, W, h, obj) {var posleft = (screen.width-w) / 2Var postop = (screen.height-h) / 2Var URL = "openwindows.jsp? url =" url "& title =" title; VAR DLGINF = "status: no; dialogheight:" h "PX; DialogWidth:" w "PX; status: no; scroll: no; dialogtop:" POSTOP "PX; DialogT:" Posleft " PX '"; var rv = showmodaldialog (url, obj, dlginf); Return RV;} Well, in order to facilitate reading, I will remove the handling of special characters in the code, and in actual use can be based on yourself The actual situation is optimized.</p>
<p>In the text, I developed a little experience for modal forms of the BS system. I hope to help everyone, the mistakes in the article, and have more optimized solutions, please let Nittystone@hotmail.com Thank you.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-91444.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="91444" 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.045</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 = '6neG8Rl7OwM4_2FEYNymKiE0crmRIw36QUa1DLyR34GGFILkUVdVbxE_2B_2BJDS_2BCmUim_2BjVwrvItyaXc7j63Hlv6gQ_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>
