отключить фон при открытии всплывающего окна

Question

Я пытаюсь отключить фон после запуска всплывающего окна в окне. Следующий код, который я использую в div, отображает форму для ввода информации, которая должна быть передана в db.

HTML-:

<div id="add_project"> 
    <a href="#" title="Close"> 
     <div class="close"> 
      <p class="x">x</p> 
     </div> 
    </a> 
    <h3>Add Project</h3> 
    <form method="post"> 
     <table width="300" align="center"> 
      <tr></tr> 
      <tr></tr> 
      <tr style="border: none"> 
       <td align="center"> 
        <input type="text" name="project name" placeholder="Enter Project Name" /> 
       </td> 
      </tr> 
      <tr></tr> 
      <tr style="border: none"> 
       <td align="center"> 
        <input type="text" name="project description" placeholder="Project Description" /> 
       </td> 
      </tr> 
      <tr></tr> 
      <tr style="border: none"> 
       <td align="center"> 
        <input type="button" value="Save" /> 
       </td> 
      </tr> 
      <tr style="border: none"> 
       <td align="center"> 
        <input type="reset" value="Cancel" /> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div> 

JQuery, чтобы скрыть и показать DIV:

$("#add_project").hide(); 
$("#addProject").click(function() { 
    $("#add_project").fadeIn(1000); 
    $(".close").fadeIn(500); 
}); 

Answer 1

Не могли бы вы попробовать этот jsfiddle

, если он работает нормально, то Вам нужно изменить JQuery, как показано ниже ..

Yo ур HTML

<div class="close" style="background-color:yellow"><a href="#" title="Close"> 
    <div ><p class="x">x</p></div></a></div> 
<div id="add_project" style="background-color:green" >  
<h3>Add Project</h3> 


     <table width="300" align="center"> 

     <tr></tr> 
     <tr></tr> 

     <tr style="border: none"> 

     <td align="center"><input type="text" name="project name" placeholder="Enter Project Name" /></td> 

     </tr> 
     <tr></tr> 
     <tr style="border: none"> 
     <td align="center"><input type="text" name="project description" placeholder="Project Description" /></td> 

     </tr> 

     <tr></tr> 

     <tr style="border: none"> 

     <td align="center"><input type="button" value="Save" /></td> 

     </tr> 

     <tr style="border: none"> 

     <td align="center"><input type="reset" value="Cancel" /></td> 
     </tr> 
     </table> 
</div> 

JQuery код ...

$(document).ready(function(){ 
    $(".close").fadeOut(500); 
     $("#add_project").click(function() { 
      $(this).hide(); 
      $(this).fadeOut(1000); 
      $(".close").fadeIn(500); 

     }); 

    $(".close").click(function() { 
      $('#add_project').show(); 
      $('#add_project').fadeIn(1000); 
      $(this).fadeOut(500); 

     }); 
}); 

Answer 2

$("#add_project").fadeIn(1000, function(){ 
    $('#background_element').css({"backgroundImage":"none"}); 
    //Or 
    $('#background_element').hide(); 
}); 

Чтобы показать его снова после того, как всплывающие закрытий.

$("#add_project").fadeOut(1000, function(){ 
    $('#background_element').css({"backgroundImage":"yourbackgroundimage.gif"}); 
    //Or 
    $('#background_element').show(); 
}); 

Answer 3

Существует всегда более чем один способ сделать что-то. Я бы установил div, который вы намереваетесь всплывать, как диалог, и просто открывайте его, когда это необходимо. Это автоматически перекрывает остальную часть страницы и предотвращает ввод пользователя. Вот и пример:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#divDialog").dialog(
      { 
       modal: true, 
       autoOpen: false, 
       width: 700, 
       buttons: { Cancel: function() { $(this).dialog("close"); } } 
      } 

     ); 
    }); 
</script> 

<div id="divDialog" title="Data Modification"> 
    //elements to enter or modify data 
</div> 

, а затем на процессе Клик:

$('#divDialog').dialog('open');