當彈出窗口打開時禁用背景

我想在窗口中觸發彈出窗口後禁用背景。下面的代碼我使用的是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); 
});

來源

2013-12-20 user3040525

請提供http://jsfiddle.net/ ... – enyce12

這是一個jsbin鏈接：http：// jsbin .com/arUgAnur/1 – user3040525

http://amolnpujari.wordpress.com/2013/12/19/a-quick-javascript-lightbox/可能對你有所幫助 –

能否請您試試這個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); 

     }); 
});

來源

2013-12-20 11:52:15

$("#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(); 
});

來源

2013-12-20 12:03:04

總有不止一種方法可以做事。我會將您打算彈出的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');

來源

2013-12-20 12:24:01

太好了。這看起來不錯。將實現這一點。 – user3040525

當彈出窗口打開時禁用背景

回答

相關問題