javascript弹出框_Javascript_Css_Html5 Canvas

javascript弹出框

javascript css html5-canvas

javascript弹出框,javascript,css,html5-canvas,Javascript,Css,Html5 Canvas,我正在尝试制作一个小的弹出框，但我无法..我没有做太多，这是我到目前为止的代码，它只显示一个小框，里面没有写任何东西..我想严格使用javascript，没有jquery，弹出框应该是交互式的，在框外单击时应该关闭 <style>#popup{display: none; height: 500px; width: 500px; position: absolute; top: 5pc; right:20pc;</style> <div id="popup">

我正在尝试制作一个小的弹出框，但我无法..我没有做太多，这是我到目前为止的代码，它只显示一个小框，里面没有写任何东西..我想严格使用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>

#弹出{显示：无；高度：500px；宽度：500px；位置：绝对；顶部：5个；右侧：20个；
函数popubox（elem）
{
var popup=document.getElementById（'elem'）；
如果（popup.style.display==“无”）
{
popup.style.display='block'；
}
}

我对弹出窗口的制作方法做了一个过于简单的描述。这里有一个神奇之处：

//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>

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open3 
单击按钮打开一个名为“MsgWindow”的新窗口，其中包含一些文本
打开“MsgWindow”
函数openWin（）
{
var myWindow=window.open（“，”MsgWindow“，”宽度=200，高度=100”）；
myWindow.document.write（“这是‘MsgWindow’。我宽200像素，高100像素！”；
}

使用纯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>

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

以下是另一种方法： za.htm：


函数dopopp（）{
var popup1=window.open（“zb.htm”，“宽度=400，高度=300”）；
popup1.focus（）；
}
弹出

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>


函数fnonblur（）{
window.close（）；
}
你好，世界。
点击我

使用外部库怎么样，比如？我不想使用任何库。我想从头开始编写代码。这样我也可以学习如何制作库。谢谢你的建议，那么最好是回顾一下已经完成的工作。你可以查看，并发现它可以很快变得非常复杂。祝你好运！谢谢你我喜欢js modal的源代码，它很容易理解：）我+1是因为我喜欢它，但它不是交互式的？这是一些好代码..我喜欢它，但我同意dcromley的观点，它不是交互式的，它使用内联事件目标，但它工作得很好，我知道如何关闭弹出框。是的，我没有我不想完全编码它，只是想知道这是否是Hawk试图实现的…但是可以通过li'l的努力实现交互。是的，我感谢你提供的信息，它工作得非常完美。这是一个很好的开端，你喜欢它…对你的项目来说是最好的。这帮助很大，你很好地使用了事件处理程序，所有这些答案结合起来，我可以制作弹出框。

<!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>

<!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>