javascript - 弹出式表格不起作用

标签 javascript jquery html css

我需要帮助来创建弹出表单。 这是我的 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'

关于javascript - 弹出式表格不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25482954/

相关文章:

javascript - 如何删除两个 Html 选择列表之间的重复项

javascript - 按提交时表单不执行任何操作

c# - jquery 自动完成 asp.net Gridview 中的多个文本框

javascript - 如何检查是否从 jQuery 调用了特定的 id?

用于填充数组的 javascript/jQuery 匿名函数

javascript - Jquery 显示/隐藏 div - 小调整

javascript - p :autocomplete completemethod isn't fired with copy-pate with mouse events

javascript - 使用 jQuery 动态 "add another product"表单

Javascript 智能舍入

javascript - 垂直对齐标题 APEXCHARTS