[英]Not able to select popup box fields and options
jquery: jQuery的:
$("#type_name").click(function(){
$("body").append('<div class="modalOverlay">');
$("#add_form").fadeIn(1000);
$("#first_name").val("");
$("#email").val("");
$("#phone_no").val("");
$("#mobile").val("");
positionPopup('#add_form');
$("#first_name").focus();
});
css: CSS:
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: .4;
background-color: rgba(0,0,0,0.3);
}
html for popup box: 弹出框的html:
<div id="add_form" style="display:none">
<form id="form" method="post" action="." onsubmit="return form_validate()">
{% csrf_token %}
<h2> Choose Follower Name</h2>
<br />
<table width="100%">
<tr>
<td style="width:100px;">First name:</td><td><input type="text" name="first_name" id="first_name" maxlength="20"/></td>
</tr>
<tr>
<td>Email:</td><td><input type="text" name="email" maxlength="36" id="email"/></td>
</tr>
<tr>
<td>Daytime phone:</td><td><input type="text" name="phone" maxlength="15" id="phone_no" /></td>
</tr>
<tr>
<td>Mobile phone:</td><td><input type="text" name="mobile" maxlength="15" id="mobile" /></td>
</tr>
<tr style="display:none;color:red" id="warning"><td colspan="2" align="center" >All fields are manditory</td></tr>
</table>
<div style="width:180px;margin:20px 5px 0 10px" align="right">
<button style="margin-right:10px;" type="button" class="close" name="cancel" class="forward backicon">
<img src="{{ STATIC_URL }}images/button-icon-ir-back.png" width="12" height="17" alt="" />
Cancel</button> {% include "buttons/add.html" %}
</div>
While displaying the popup,to hide the background modalOverlay css i used.I am able to hide the background but i am not able to select any option or field in popup box. 在显示弹出窗口时,要隐藏我使用的背景modalOverlay CSS。我可以隐藏背景,但无法在弹出框中选择任何选项或字段。
Thanks 谢谢
You should add the z-index to your modalOverlay class selector: 您应该将z-index添加到您的modalOverlay类选择器中:
.modalOverlay {
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: .4;
background-color: rgba(0,0,0,0.3);}
I used 9999 for the z-index
value, but it can be any number, as long no other element has a higher z-index
value. 我使用9999作为
z-index
值,但是它可以是任何数字,只要没有其他元素具有更高的z-index
值即可。 Another thing to consider is that z-index applys only to elements with position absolute
, relative
or fixed
like yours. 要考虑的另一件事是,z-index仅适用于位置
absolute
, relative
或fixed
元素(如您的元素)。
Out of topic, but still relevant for your problem, if you set opacity
.4 to your modalOverlay, everything in it will have an opacity
of .4 too. 如果您将
opacity
.4设置为modalOverlay,但仍与您的问题相关,但仍然与您的问题相关,其中的所有内容也将具有.4的opacity
。 I don't belive that's what your trying to achieve. 我不相信那是您要实现的目标。 Forgive me if I'm wrong.
如果我错了,请原谅我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.