html 模态弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1992142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html Modal popup
提问by Hulk
How to make a simple modal popup for the following code.And on click on the background the modal popup should not disappear.
如何为以下代码制作一个简单的模态弹出窗口。点击背景时，模态弹出窗口不应消失。
<html>
<input type="textarea"></input>
</html>
采纳答案by bobince
Here's a plain-JavaScript example:
这是一个纯 JavaScript 示例：
var modal = document.getElementById('modal');
var shade = document.getElementById('shade');
document.getElementById('start').onclick = function() {
modal.style.display = shade.style.display = 'block';
};
document.getElementById('close').onclick = function() {
modal.style.display = shade.style.display = 'none';
};
// This code is a workaround for IE6's lack of support for the
// position: fixed style.
//
if (!('maxHeight' in document.body.style)) {
function modalsize() {
var top = document.documentElement.scrollTop;
var winsize = document.documentElement.offsetHeight;
var docsize = document.documentElement.scrollHeight;
shade.style.height = Math.max(winsize, docsize) + 'px';
modal.style.top = top + Math.floor(winsize / 3) + 'px';
};
modal.style.position = shade.style.position = 'absolute';
window.onscroll = window.onresize = modalsize;
modalsize();
}body {
margin: 0;
}
#shade,
#modal {
display: none;
}
#shade {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#modal {
position: fixed;
z-index: 101;
top: 33%;
left: 25%;
width: 50%;
}
#shade {
background: silver;
opacity: 0.5;
filter: alpha(opacity=50);
}<div id="shade"></div>
<div id="modal">
<textarea rows="5" cols="25"></textarea>
<button id="close">Close</button>
</div>
<p>
<button id="start">Start</button>
</p>There are various improvements you can make from there, such as iframe hacks to fix IE z-indexing, or encapsulating it in a reusable object, but that's the basic way it's done.
您可以从那里进行各种改进，例如 iframe hacks 以修复 IE z-indexing，或将其封装在可重用对象中，但这是完成的基本方式。
回答by Sampson
jQueryUI has a modal dialog plugin. It won't release control simply by clicking the background, as you requested: http://jqueryui.com/demos/dialog/#modal
jQueryUI 有一个模态对话框插件。它不会按照您的要求简单地通过单击背景来释放控制权：http: //jqueryui.com/demos/dialog/#modal
<a href="#" class="showModal">Show Modal Box</a>
<div id="modalContents" style="display:none;">
<textarea>Hello World</textarea>
</div>
--
——
$(".showModal").click(function(e){
e.preventDefault();
$("#modalContents").dialog({bgiframe: true, height: 140, modal: true});
});
回答by Danish Khan
you can also use native HTML5.1 dailog. currently dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.
您还可以使用原生 HTML5.1 对话。当前对话框元素仅在 Chrome 37+、Safari 6+ 和 Opera 24+ 中受支持。
var dailog = document.getElementById("dialog");
function openModal() {
// dailog.show();
dailog.showModal();
}
function closeModal() {
dailog.close();
} #dialog{width:300px;}
.right{float:right}<button onclick="openModal()">Show dialog</button>
<dialog id="dialog">This is a dialog window<br/><br/><br/>
<button onclick="closeModal()" class="right">Close</button>
</dialog>回答by compserve23
a Modal window by definition requires action to be taken by the user before it can be returned to the main window. So what you are looking for is not a modal but a window.
根据定义，模态窗口要求用户在返回主窗口之前采取行动。所以你要找的不是模态而是一个窗口。
回答by mishal153
html5 on chrome has the <dialog>element. Do experiment with it
chrome 上的 html5 具有该<dialog>元素。用它做实验
