Question

我正在尝试制作一个小弹出框，但我无法...我没有走得太远，这是我到目前为止的代码，它只显示一个没有写入的小盒子它..我想严格使用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>

Answer 1

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

请在此处找到 fiddle - 如果有帮助，请与我们联系。

您的弹出式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'}
    }

Answer 2

我整理了一个过于简单的jsFiddle demo弹出窗口的方法。这是魔术：

//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";
    }
}

它绝不应被视为完整或生产材料，但我希望它可以帮助您开始正确的方法来扩展它以实现您正在寻找的功能。

Answer 3

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

Answer 4

这是另一种方法： 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>

javascript弹出框

4 个答案: