javascript - Not able to select popup box fields and options -

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:

.modaloverlay {     position: fixed;     width: 100%;     height: 100%;     top: 0px;     left: 0px;     opacity: .4;      background-color: rgba(0,0,0,0.3); } 

html popup box:

<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 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 popup,to hide background modaloverlay css used.i able hide background not able select option or field in popup box.

thanks

you should add z-index modaloverlay class selector:

.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 z-index value, can number, long no other element has higher z-index value. thing consider z-index applys elements position absolute, relative or fixed yours.

out of topic, still relevant problem, if set opacity .4 modaloverlay, in have opacity of .4 too. don't belive that's trying achieve. forgive me if i'm wrong.