Not able to select popup box fields and options

Question

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 for 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 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.

Thanks

Answer 1

You should add the z-index to your 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 for the z-index value, but it can be any number, as long no other element has a higher z-index value. Another thing to consider is that z-index applys only to elements with position absolute , relative or fixed like yours.

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. I don't belive that's what your trying to achieve. Forgive me if I'm wrong.