当弹出窗口打开时禁用背景

我想在窗口中触发弹出窗口后禁用背景。下面的代码我使用的是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

当弹出窗口打开时禁用背景

回答

相关问题