javascript弹出框
javascript弹出框
提问于 2014-04-22 18:47:43
我试着制作一个小的弹出框，但是我不能.我没有做太多，这是我到目前为止的代码，它只显示一个没有写任何东西的小框.我想使用严格的javascript，没有jquery，弹出框应该是交互式的，当在框外点击时应该关闭
<style>#popup{display: none; height: 500px; width: 500px; position: absolute; top: 5pc; right:20pc;</style>
<div id="popup"></div>
<script>
function popupbox(elem)
{
var popup = document.getElementById('elem');
if( popup.style.display == 'none' )
{
popup.style.display = 'block';
}
}
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2014-04-22 20:16:55
我整理了一个过于简单的弹出窗口的jsFiddle演示。这是魔法：
//Display Popup method - you can modify this to add parameters
function displayPopup(event) {
//dynamically create a div, button, and inner text
var p = document.createElement('div'),
b = document.createElement('button'),
t = document.createTextNode("Text and stuff");
//add popup class to newly created div
p.className += 'popup';
//Add text to close button element
b.innerHTML = "close";
//Append text to popup div
p.appendChild(t);
//Bind click event to button element
b.onclick = closePopup;
//Append button to popup div, and append popup to document body
p.appendChild(b);
document.body.appendChild(p);
p.style.display="block";
//This function hides the popup
function closePopup(event){
p.style.display="none";
}
}它不应该被认为是完整的或生产的材料，但我希望它能帮助你在正确的道路上开始扩展它以实现你想要的功能。
Stack Overflow用户
发布于 2014-04-22 20:25:39
如果您只是想做一个弹出框，请使用window.open：
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open3
<html>
<body>
<p>Click the button to open an a new window called "MsgWindow" with some text.</p>
<button onclick="openWin()">Open "MsgWindow"</button>
<script>
function openWin()
{
var myWindow = window.open("","MsgWindow","width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
}
</script>
</body>
</html>Stack Overflow用户
发布于 2014-04-22 20:38:43
下面是另一种方法: za.htm：
<!DOCTYPE html>
<html>
<head>
<script>
function dopopup() {
var popup1 = window.open("zb.htm", "", "width=400, height=300");
popup1.focus();
}
</script>
</head>
<body>
<button onclick="dopopup()">Make Popup</button>
</body>
</html>zb.htm：
<!DOCTYPE html>
<html>
<head>
<script>
function fnonblur() {
window.close();
}
</script>
</head>
<body onblur="fnonblur();">
Hello, world.
<button onclick="alert('Hello, again.');")>Click me</button>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23227804
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号