не в состоянии выбрать всплывающие поля окна и параметры

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 для всплывающего окна:

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

При отображении всплывающего окна, чтобы скрыть background modalOverlay css, который я использовал. Я могу скрыть фон, но я не могу выбрать какой-либо параметр или поле во всплывающем окне.

Благодаря

Answer 1

Вы должны добавить Z-индекс для вашего 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);} 

я использовал 9999 для значения z-index, но это может быть любое число, до тех пор, ни один другой элемент не имеет более высокое значение z-index. Другое дело, что z-index применяется только к элементам с позицией absolute, relative или fixed, как ваш.

Из-за темы, но все еще актуальной для вашей проблемы, если вы установили opacity .4 на ваш modalOverlay, все в нем будет opacity. .4. Я не верю, что это то, чего вы пытаетесь достичь. Простите меня, если я ошибаюсь.