javascript弹出框

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'}
    }