javascript pop up boxes

javascript pop up boxes

本文关键字：boxes up pop javascript      更新时间：2023-09-26

我正在尝试制作一个小的弹出框，但我做不到。。我还没有做得太远，这是我迄今为止的代码，它只显示一个没有写任何内容的小框。。我想严格使用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>

使用纯CSS和JS可以很容易地完成。。。

请在这里找到小提琴-如果这有帮助，请告诉我。

你的弹出html代码可以像-

<div id="click" onClick="showPopUp()">Click here to see the pop up</div>
<div id="popup">
    <div id="header">Welcome to Pop-Up
        <img src="http://icongal.com/gallery/image/158734/actions_window_close.png" width="20px" onclick="closeThis()" />
    </div>
    <div>THIS IS THE TEXT OF POP-UP</div>
</div>

基本CSS-

#popup {
    position:absolute;
    display: none;
    left:50%;
    top:10px;
}

JS代码-

1） 点击文本显示弹出窗口

    function showPopUp() {
        document.getElementById("popup").style.display = "block";
    }

2） 点击页面上的其他位置时，要检查/隐藏弹出窗口-

    document.onclick=check;
    function check(e) {
            var target = (e && e.target) || (event && event.srcElement);
            var obj = document.getElementById('click');
            if(target!=obj){document.getElementById('popup').style.display='none'}
    }

我制作了一个过于简单的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";
    }
}

它决不应该被视为完整的或生产材料，但我希望它能帮助您开始正确的扩展路径，以实现您想要的功能。

如果你只是想做一个弹出框，请使用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>

这里有另一种方法：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>
相关文章：