Question

我需要帮助来创建弹出窗体。这是我的HTML代码的一部分＆amp; jquery代码：

 <body id ="bdy" onclick = "check(event)" style="overflow:auto;">

 <div id="ric">

     <!-- Popup div starts here -->
 <div id="popupContact"> 

    <!-- contact us form -->
        <form action="#" method="post" id="form" >
            ...
        </form>
 </div> 
 <!-- Popup div ends here -->
 </div>
 <!-- display popup button -->
    <CENTER><h1>Click Button To Popup Form Using Javascript</h1>
            <button id = "popup" onclick ="div_show()">Popup</button></CENTER>

 </body>

和Jquery：

//function to display Popup
function div_show(){ 
document.getElementById('ric').style.display = "block";
}

//function to check target element
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 

var obj = document.getElementById('ric'); 
var obj2 = document.getElementById('popup'); 

checkParent(target)?obj.style.display='none':null; 
target==obj2?obj.style.display='block':null; 

} 

//function to check parent node and return result accordingly
function checkParent(t){ 
    while(t.parentNode){ 
        if(t==document.getElementById('ric'))
            { 
                return false 
            }
        else if(t==document.getElementById('close'))
            {
                return true
            } 
        t=t.parentNode 
    } 
    return true 
}

这是css的一部分：

#ric{
width: 100%;
height: 100%;
opacity: 0.95;
top: 0;
left: 0;
display: none;
position: fixed;            
background-color: #313131;
overflow:auto;
}

上面的CSS应该隐藏div，但是当我运行它时，div仍会显示。我的代码有问题吗？如果您有其他显示弹出窗体的简单示例，请与我分享。

Answer 1

当您将div id从'abc'更改为'ric'时，您还应该将css定义的名称从'abc'更改为'ric'

Answer 2

嘿，你可以像这样使用

 $("#btnShowSimple").click(function (e)
  {
     ShowDialog(false);
     e.preventDefault();
  });

  $("#btnShowModal").click(function (e)
  {
     ShowDialog(true);
     e.preventDefault();
  });

  $("#btnClose").click(function (e)
  {
     HideDialog();
     e.preventDefault();
  });

Live Demo

希望它可以帮到你

Answer 3

您可以在javascript / jQuery 中编写 onclick函数，而不是在HTML 中编写 onclick函数，它可以正常工作。

<强> FIDDLE DEMO

$('#popup').click(function(){ document.getElementById('ric').style.display = "block"; })

检查 THIS 链接为什么你不应该用HTML编写onclick

弹出窗体不起作用

3 个答案: