Question

<html> 
 <head>
   <script src="../../../js/jqueryv1.10.2.js"></script>
   <script>
    $(document).ready(function() 
    {       
      $('.wings').click(function(event) 
      {
        $(this).next('.popupbox').fadeIn("slow");
        $('body').css('background','#333');
        //$("body").css({ "background":"#333", "opacity":"0.4","filter":"alpha(opacity=40)" });
      });

       $('.popupclose').click(function(event) 
       {            
           unloadPopupBox();
           $('body').css('background','white');
       });     

       function unloadPopupBox() 
       {
          $('.popupbox').fadeOut("normal");       
       }  
       $(".popupbox").hide();
    });
   </script>
   <style>
    .container {font-family:verdana; font-size:13px; margin:0px auto; width:1200px; }
    .popupbox { position:center; background:#FFFFFF;  z-index:100px; -moz-box-shadow: 0 0 5px lightgray; -webkit-box-shadow: 0 0 5px lightgray; 
                box-shadow:0 0 5px lightgray; display:none; min-width:100%; min-height:100%; overflow:auto;}    
    .popupclose { border:0px solid lightgray; color:#6FA5E2; line-height:15px; float:right; cursor:pointer; text-decoration:none; }
   </style>
 </head>

 <body> 

  <div class="container">

    <!-- popup1-->
     <a class="wings" style="background:#8AC007;color:#FFF;font-weight:bold;">Popup1</a>
     <div class="popupbox"><div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>  
     <img src="train.jpg"/>     
     </div>
    <!-- popup1-->    

    <!-- popup2-->
    <div style="margin-top:10px;">
      <input type="button" class="wings" value="Popup2"/>
      <div class="popupbox">
      <div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>
       <table>
        <tr><td>USERNAME : </td><td><input type="text" size="30%"></td></tr>
        <tr><td>PASSWORD : </td><td><input type="password" size="30%"></td></tr>      
        <tr><td><input type="submit" value="LOGIN"></td></tr>
       </table> 
    </div>  
    <!-- popup2-->  

    <!-- popup3-->
    <div style="margin-top:10px;">      
      <p class="wings">click on the image to view big screen</div>    
      <div class="popupbox"><div style="height:30px;"><img class="popupclose" src="../../../images/close.png" style="float:right;"></img></div>       
      <div><img class="wings" src="god.jpg"/></div>
    </div>  
    <!-- popup3-->
   </div><!--container-->

 </body>
</html>

http://jsfiddle.net/isherwood/3ac9Z

我有三个弹出窗口显示在同一页面上。

（1）当我点击上述三个中的任何一个时，弹出窗口应显示在中心位置自动浏览器，所有弹出窗口的位置，宽度（自动），高度（自动）应该相似，不应该有所不同。

（2）我需要调整背景的不透明度，在我关闭弹出窗口之前它不允许在后端操作，但是现在我可以看到一些div边框，图像，按钮我打开弹出窗口时的背景。

我需要这样的事情：http://www.joomdle.com/en/forum/r09-support/10576-moodle-joomdle-joomla(discussion4)

感谢您的帮助。

Answer 1

没有选项：position: center：）

更改你的css：

.popupbox { 
  position:absolute; 
  width: 200px; /* Or what you want */
  height: 200px; /* Or what you want */
  left: 50%;
  top: 50%;
  margin-left: -100px; /* This should be  - width / 2 */
  margin-top: -100px; /* This should be  - height / 2 */
  background:#FFFFFF;  
  z-index:100;  // z-index is not pixels ;)
  -moz-box-shadow: 0 0 5px #999; 
  -webkit-box-shadow: 0 0 5px #999; 
  box-shadow:0 0 5px #999; 
  display:none;  
  overflow:auto;
}

如果你想要某种覆盖......你应该做另一个div：

#overlay {

 position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0,0,0,0.6);
  z-index: 90; /* just smaller than popupbox */
}

自动定位Jquery Popup

1 个答案: