javascript onclick创建(元素)div viz弹出框
我试着制作一个弹出框,点击一个按钮就会被调用,这就是我到目前为止得到的 我已经更新了您的应用程序并使其正常运行 更改的HTMLjavascript onclick创建(元素)div viz弹出框,javascript,events,createelement,Javascript,Events,Createelement,我试着制作一个弹出框,点击一个按钮就会被调用,这就是我到目前为止得到的 我已经更新了您的应用程序并使其正常运行 更改的HTML <button id="popupButton">click here</button> 这是否回答了您的问题,或者还有其他问题 更新改进了代码和小提琴。现在打开并关闭works试试这个 function popUp(){ var popup = document.createElement('div');
<button id="popupButton">click here</button>
这是否回答了您的问题,或者还有其他问题
更新改进了代码和小提琴。现在打开并关闭works试试这个
function popUp(){
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'test';
var cancel = document.createElement('div');
cancel.className = 'cancel';
cancel.setAttribute('onClick', 'document.getElementById("test").parentNode.removeChild('+popup +');')
popup.innerHTML = "This is a test message";
document.body.appendChild(popup);
popup.appendChild(cancel);
}
这是一把小提琴,它能做你想做的事- JS
function popUp(){
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'test';
var cancel = document.createElement('div');
cancel.className = 'cancel';
cancel.innerHTML = 'close';
cancel.onclick = function (e) { popup.parentNode.removeChild(popup) };
var message = document.createElement('span');
message.innerHTML = "This is a test message";
popup.appendChild(message);
popup.appendChild(cancel);
document.body.appendChild(popup);
}
.popup
{
position:absolute;
top:0px;
left:0px;
margin:100px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}
.cancel
{
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
function openPopup() {
document.getElementById('test').style.display = 'block';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
注释
function popUp(){
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'test';
var cancel = document.createElement('div');
cancel.className = 'cancel';
cancel.innerHTML = 'close';
cancel.onclick = function (e) { popup.parentNode.removeChild(popup) };
var message = document.createElement('span');
message.innerHTML = "This is a test message";
popup.appendChild(message);
popup.appendChild(cancel);
document.body.appendChild(popup);
}
.popup
{
position:absolute;
top:0px;
left:0px;
margin:100px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}
.cancel
{
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
function openPopup() {
document.getElementById('test').style.display = 'block';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
要在元素上设置类,请使用element.className而不是element.class。
对于cancel元素上的onclick事件处理程序,最好直接为onclick处理程序分配一个匿名函数,该函数可以完成上面的示例中所需的工作
编辑(更有效的方式) 这实际上是获得您想要的结果的一个更好的方法,因为每次显示弹出窗口时重新创建元素不会带来任何开销。小提琴- CSS
function popUp(){
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'test';
var cancel = document.createElement('div');
cancel.className = 'cancel';
cancel.innerHTML = 'close';
cancel.onclick = function (e) { popup.parentNode.removeChild(popup) };
var message = document.createElement('span');
message.innerHTML = "This is a test message";
popup.appendChild(message);
popup.appendChild(cancel);
document.body.appendChild(popup);
}
.popup
{
position:absolute;
top:0px;
left:0px;
margin:100px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}
.cancel
{
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
function openPopup() {
document.getElementById('test').style.display = 'block';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
HTML
<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
This is a test message
<div class="cancel" onclick="closePopup();"></div>
</div>
请在上尝试此更新
更改:
除非您包装了代码document.getElementById('popupButton')。onclick=popUp;在加载DOM后调用的函数中。@tjscience你说得对。JSFIDLE为您处理这个问题,但我还是将它添加到了我的答案中,只是为了完整。谢谢你的评论!您好,我这样做了,它确实添加到页面元素。但是,popup没有显示在页面上。您知道为什么吗?在上面的单击处理程序代码中,您不需要重新获取popup元素,因为范围中已经存在对它的引用。如果下面的答案之一已经回答了您的问题,请接受它。谢谢您好,我这样做了,它确实添加到页面元素。然而,弹出窗口并没有显示在页面上,您知道为什么吗?