没有jQuery的modal dialog
我需要使用javascript在网页上创建一个modal dialog。 通常这很简单，因为我可以使用类似jQueryUI或BlockUI的东西，但这里需要注意的是我不允许使用jQuery，我需要支持IE9怪癖模式（即没有html5 doctype）。 我在网上找不到任何与我需要的东西有关的东西。 有人会有建议吗？ 谢谢。
如何使用居中于中间的div进行叠加？
你可以拥有你可以隐藏的div（使用javascript）：
Content you want the user to see goes here.
叠加层的CSS样式可能如下所示：
#overlay { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 1000; }
你可以使用javascript切换overaly div中内容的可见性：
function overlay() { el = document.getElementById("overlay"); el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; }
更多例如： http ： //raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
我创建了一个名为tomloprodModal的库，它可以满足您的需求。 它是一个简单且可配置的javascript库，用于创建无依赖关系的响应式和极简主义模式窗口。
我希望它对你有所帮助。
安装：
只需下载并添加tomloprodModel.css和tomloprodModel.js到您的网站。
您也可以使用凉亭 ： bower install tomloprodModal或使用npm ： npm install tomloprodModal
初始化：
使用Javascript：
TomloprodModal.start({ closeOut: true, bgColor: "#FFFFFF", textColor: "#333333" });
模态窗口示例：
Lorem Ipsum...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
结果：
或者，您可以创建没有任何HTML的模态窗口：
TomloprodModal.create({ bgColor: "#FFFFFF", textColor: "#333333", title: "Hi!", content: "Nothing to say", closeTimer: 1000 });
文档：
https://github.com/tomloprod/tomloprodModal
演示：
ModaliseJS ，比tomloprodModal更轻，兼容任何CSS。
HTML :(如果你有自己的设计或使用bootstrap，则省略modalise.css）
Modal example Example modal 1
代码：
var myModal = {} window.onload = function(){ // It is one of the button Modalise will attach the Show event. // Note that you can use Modalise without the events, by omitting the .attach() function. // Then, you can use show() or hide() to use it manually without overload. var btnOpen = document.getElementById('openModal'); // Modalise(id, options); myModal = new Modalise('exampleModal', { btnsOpen : [btnOpen] }) .attach() .on('onShow', console.log) .on('onConfirm', console.log) .on('onHide', console.log); }
我已经编写了一些简单的JavaScript函数，以及一个演示页面来向您展示如何使用它们。 您可以在http://www.interbit.com/demos/modal.html上查看此信息 。
我写的函数叫做MsgBox（），YesNo（）和YesNoCancel（）。 他们做了他们的名字所暗示的。
要使用它们，只需在上面的链接中复制JavaScript文件，并将其包含在HTML中。 请不要只链接到该文件。 而是复制它，因为我可以随时更改它或将其删除。
样品：
MsgBox("This is a message for the user.", "This is the title"); MsgBox("This is a message for the user.", "This is the title", "JSSnippetToCall();"); YesNo("Are you sure you want to do this?", "Please Confirm", "JSSnippetToCallOnYes();", "JSSnippetToCallOnNo();"); YesNoCancel("Are you sure you want to do this?", "Please Confirm", "JSSnippetToCallOnYes();", "JSSnippetToCallOnNo();", "JSSnippetToCallOnCancel();");
我还添加了一个名为JavaScriptError（）的函数，它接受一个JavaScript Error对象并将其格式化以便显示给用户，适合在try / catch块中使用：
try { } catch (e) { JavaScriptError(e); }
以下是其中一位评论者建议的完整代码清单。 您可以将其包含在所有项目中。 关于我希望你如何给我信任，我有一些讽刺的评论，但我真正要求的是一般的礼貌。 除非你窃取代码并声称你写了代码，否则我并不打算起诉任何人。
/**************************************************************************************************/ /* Copyright 2016. Matthew G. Collins. All rights reserved. /**************************************************************************************************/ /* The functions below are each self-contained and can be copied into any HTML file by themselves /* and used. The CSS styling is accomplished by using the STYLE attribute on each HTML tag. There /* is no need to use external CSS. Of course, once you copy the code you can modify it to suit /* your needs, including changing the styling. But be careful, especially with the msgBoxDivStyle, /* because some of it is necessary to achieve the desired effect. /* /* You are free to simply copy this JavaScript code into your application, as long as you include /* the copyright notice in each copy of the code you make. No exceptions. If you don't, and I /* find out, I'll sue you for enough money to retire on. Because that's just rude and rude /* people need to be sued to make the world a better place. You are also free to modify the code /* to suit your needs. But if you do, you still need to give me credit. /* /* To see how these functions can be used in practice to give the effect of a modal dialog box /* see the demonstration page at http://www.interbit.com/demos/modal.html. /* /* I recognize that this code could easily have been written more efficiently, and without some of /* the redundancy. I intentionally wrote it the way I did to make it more easily understandable /* and modifiable to meet your needs. /**************************************************************************************************/ /**************************************************************************************************/ /* Function MsgBox /* Copyright 2016. Matthew G. Collins. All rights reserved. /* Parameters: Message, WindowTitle, onOK /* Description: This function displays a modal message box with a single OK button. /* When the user clicks the OK button the box is removed and the JavaScript provided /* in the onOK parameter, if any, is called. /* /* To see how this function can be used in practice to give the effect of a modal dialog box /* see the demonstration page at http://www.interbit.com/demos/modal.html. /**************************************************************************************************/ function MsgBox(msg, title, onOK) { try { var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;"; var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;"; msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;"; var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;"; var msgBoxButtonStyle = "margin: 20px;"; var msgDiv = ""; if (title == null) { title = "Information"; } if (onOK == null) { onOK = ""; } titleStyle = msgBoxTitleStyle; if (title == "Error" || title == "JavaScript Error" || title == "Exception") { titleStyle = msgBoxErrorTitleStyle; } else if (title == "Success") { titleStyle = msgBoxSuccessTitleStyle; } else if (title == "Warning") { titleStyle = msgBoxWarningTitleStyle; } msgDiv += ""; // Covers the entire body to prevent any interaction with controls in the body. msgDiv += ""; // Contains the messagebox itself msgDiv += "" + title + ""; msgDiv += "" + msg + ""; // Contains the text of the message to be displayed. msgDiv += ""; msgDiv += ""; // Closes the modalBox and modalDiv tags document.body.insertAdjacentHTML("afterBegin", msgDiv); // This next line is necessary so that the new elements can be referred to in the following JavaScript code. document.body.focus(); // Disable the tab key so that the user can't use it to get to the other controls on the page. document.getElementById('answerOK').onkeydown = function(e){if(e.keyCode==9){return false;}} document.getElementById('answerOK').focus(); } catch (e) { JavaScriptError(e); } } /**************************************************************************************************/ /* Function YesNo /* Copyright 2016. Matthew G. Collins. All rights reserved. /* Parameters: Message, WindowTitle, onYes, onNo /* Description: This function displays a modal message box with two buttons labeled "Yes" and "No". /* When the user clicks either button the box is removed and the appropriate /* JavaScript (passed in the onYes and onNo parameters) is executed. /* /* To see how this function can be used in practice to give the effect of a modal dialog box /* see the demonstration page at http://www.interbit.com/demos/modal.html. /**************************************************************************************************/ function YesNo(msg, title, onYes, onNo) { try { var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;"; var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;"; msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;"; var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;"; var msgBoxButtonStyle = "margin: 20px;"; var msgDiv = ""; if (title == null) { title = "Confirm"; } if (onYes == null) { onYes = ""; } if (onNo == null) { onNo = ""; } msgDiv += ""; // Covers the entire body to prevent any interaction with controls in the body. msgDiv += ""; // Contains the messagebox itself msgDiv += "" + title + ""; msgDiv += "" + msg + ""; // Contains the text of the message to be displayed. msgDiv += ""; msgDiv += ""; msgDiv += ""; // Closes the modalBox and modalDiv tags document.body.insertAdjacentHTML("afterbegin", msgDiv); // This next line is necessary so that the new elements can be referred to in the following JavaScript code. document.body.focus(); // Intercept the tab key so that the user can't use it to get to the other controls on the page. document.getElementById('answerYes').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerNo').focus();return false;}} document.getElementById('answerNo').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerYes').focus();return false;}} // Put the user's focus on the Yes button. document.getElementById('answerYes').focus(); } catch (e) { JavaScriptError(e); } } /**************************************************************************************************/ /* Function YesNoCancel /* Copyright 2016. Matthew G. Collins. All rights reserved. /* Parameters: Message, WindowTitle, Callback /* Description: This function displays a modal message box with three buttons labeled "Yes", "No", /* and "Cancel". When the user clicks any of the buttons the box is removed and the /* appropriate JavaScript (passed in the onYes, onNo, and onCancel parameters) /* is called, if any. /* /* To see how this function can be used in practice to give the effect of a modal dialog box /* see the demonstration page at http://www.interbit.com/demos/modal.html. /**************************************************************************************************/ function YesNoCancel(msg, title, onYes, onNo, onCancel) { try { var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;"; var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;"; var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;"; msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;"; var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;"; var msgBoxButtonStyle = "margin: 20px;"; var msgDiv = ""; if (title == null) { title = "Confirm"; } if (onYes == null) { onYes = ""; } if (onNo == null) { onNo = ""; } if (onCancel == null) { onCancel = ""; } msgDiv += ""; // Covers the entire body to prevent any interaction with controls in the body. msgDiv += ""; // Contains the messagebox itself msgDiv += "" + title + ""; msgDiv += "" + msg + ""; // Contains the text of the message to be displayed. msgDiv += ""; msgDiv += ""; msgDiv += ""; msgDiv += ""; // Closes the modalBox and modalDiv tags document.body.insertAdjacentHTML("afterbegin", msgDiv); // This next line is necessary so that the new elements can be referred to in the following JavaScript code. document.body.focus(); // Intercept the tab key so that the user can't use it to get to the other controls on the page. document.getElementById('answerYes').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerNo').focus();return false;}} document.getElementById('answerNo').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerCancel').focus();return false;}} document.getElementById('answerCancel').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerYes').focus();return false;}} // Put the user's focus on the Yes button. document.getElementById('answerYes').focus(); } catch (e) { JavaScriptError(e); } } /**************************************************************************************************/ /* Function JavaScriptError /* Copyright 2016. Matthew G. Collins. All rights reserved. /* Parameters: JavaScript Error Object /* Description: This function formats and uses the MsgBox function to display a JavaScript Error. /* /* To see how this function can be used in practice to give the effect of a modal dialog box /* see the demonstration page at http://www.interbit.com/demos/modal.html. /**************************************************************************************************/ function JavaScriptError(e) { var msg = ""; try { msg = e.name + "
" + e.message + "
" + e.stack; } catch (e) { msg = e.message; } try { MsgBox(msg, "JavaScript Error"); } catch (e1) { alert(msg); } } /**************************************************************************************************/ /* Function jsonError /* Parameters: JSON object with the following properties: errNumber, errMessage. /* The JSON object may have additional properties, but it will only use the errNumber /* and errMessage properties. /* Description: This function formats and displays a JSON error. /**************************************************************************************************/ function jsonError(err) { msg = "Error " + err.errNumber + "
"; msg += err.errMessage + "
"; MsgBox(msg, "Exception"); }
我创建了一个名为Msg的库，可以轻松创建模态窗口。 它有很多选项和事件来制作你自己的各种模态窗口。 一切都可以通过CSS定制。 它也是一个文件，无需导入css文件。
使用position:fixed
而这个小提琴 ，
我设法克服了第一个答案的局限性
得到这个演示。 你基本上需要全屏和固定位置样式的玻璃div和嵌套的可滚动内容div。
您还可以使用document.write ，然后重定向以关闭对话框。