弹出式窗体没有't工作

Pop Up Form doesn't Work

本文关键字：工作 窗体 弹出式      更新时间：2023-09-26

我需要帮助创建弹出表单。这是我的部分html代码&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。我的代码有问题吗？如果您有其他显示弹出表单的简单示例，请与我分享。

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

嘿，你可以像这样使用

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

实时演示

希望它能帮助你

您可以简单地在javascript/jQuery中编写onclick函数，而不用在HTML中编写
onclick，它会很好地工作。

FIDDLE演示

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

检查THIS链接为什么不应该在HTML

中编写onclick
相关文章：