當div彈出時禁用背景

我想要做的是當我按下按鈕並禁用背景時顯示一個div作爲彈出窗口。當div彈出時禁用背景

我的彈出窗口工作得很好，但是當我嘗試禁用背景時出現問題。爲了做到這一點，我使用了所謂的「面具」，它必須佔據整個身體。該div必須在開始時隱藏，並在有人按下按鈕時顯示。

事情是這個div（掩碼）始終顯示，從開始。

我一直在試圖找到在互聯網的解決方案，我發現，除其他外，以下幾個環節： CSS Disable background when div popup和 disable background using css when popup appear

第一個沒有解決，第二個的解決方案不能解決我的問題。

這是我的.jsp文件：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
     pageEncoding="ISO-8859-1"%> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 

    <link href="css/styles.css" rel="stylesheet" type="text/css"> 
    <link href="css/popup.css" rel="stylesheet" type="text/css"> 

    <script src="js/jquery-2.1.0.js" type="text/javascript"></script> 
    <script language="javascript" type="text/javascript" src="js/popup.js"></script> 
    </head> 

    <body> 
     <div id="pop"> 
      <div id="close">X</div> 
      <div id="contentPop"></div> 
     </div> 

     <div id="mask"> 
      <div id="page-wrap"> 
       ... 
       <a class="minibtn" onclick="show();">Show pop-up</a> 
          ... 

      </div> 
     </div> 
    </body> 

    </html>

我省略了一切，這是外星人在彈出的代碼，我已經取代了它「...」。

的popup.css文件：

#mask{ 
    z-index: 500; 
    position: fixed; 
    display: none; /* removes the element completely from the document, it doesn't take up any space. */ 
    /* visibility: hidden; -- hides the element, but it still takes up space in the layout. */ 
    background: transparent; 
    background-color: #ccc; 
    height: 100%; 
    width: 100%; 
    top: 0px; 
    left: 0px; 

} 

#pop { 
    z-index:2; 
    position:absolute; 
    border: 1px solid #333333; 
    text-align:center; 
    background:#ffffff; 
} 

#close { 
    float:right; 
    margin-right:5px; 
    cursor:pointer; 
    font:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    color:#FFFFFF; 
    background-color:#666666; 
    width:12px; 
    position:relative; 
    margin-top:-1px; 
    text-align:center; 
}

而且popup.js文件：

function show() { 
    // Show pop-up and disable background using #mask 
    $("#pop").fadeIn('slow'); 
    $("#mask").fadeIn('slow'); 
    // Load content. 
    $.post("contentPopup.html", function(data) { 
     $("#contentPop").html(data); 
    }); 

} 

$(document).ready(function() { 
    // Hide pop-up and mask 
    $("#mask").hide(); 
    $("#pop").hide(); 


    // Size pop-up 
    var img_w = 600; 
    var img_h = 300; 

    // width and height in css. 
    $("#pop").css('width', img_w + 'px'); 
    $("#pop").css('height', img_h + 'px'); 

    // Get values from the browser window 
    var w = $(this).width(); 
    var h = $(this).height(); 

    // Centers the popup 
    w = (w/2) - (img_w/2); 
    h = (h/2) - (img_h/2); 
    $("#pop").css("left", w + "px"); 
    $("#pop").css("top", h + "px"); 

    // Function to close the pop-up 
    $("#close").click(function() { 
     $("#pop").fadeOut('slow'); 
     $("#mask").fadeOut('slow'); 
    }); 
});

非常感謝您的時間和幫助。如果有任何疑問，請讓我知道，我會嘗試以更好的方式解釋它。

來源

2014-04-24 ediaz

有兩個錯誤。你已經使用「顯示彈出」裏面的「掩碼」股利沒有顯示。其次爲關閉圖標你給「的z-index：2」，這應該是比面具的z-index更大的展現在掩模頂面

http://jsfiddle.net/5tFrg/

<pre> 
    $(document).ready(function() { 
     $('.minibtn').click(function() { 
     // Show pop-up and disable background using #mask 
     $("#pop").fadeIn('slow'); 
     $("#mask").fadeIn('slow'); 
     // Load content. 
     $.post("contentPopup.html", function(data) { 
      $("#contentPop").html(data); 
     }); 
     }); 

     // Hide pop-up and mask 
     $("#mask").hide(); 
     $("#pop").hide(); 


     // Size pop-up 
     var img_w = 600; 
     var img_h = 300; 

     // width and height in css. 
     $("#pop").css('width', img_w + 'px'); 
     $("#pop").css('height', img_h + 'px'); 

     // Get values ??from the browser window 
     var w = $(this).width(); 
     var h = $(this).height(); 

     // Centers the popup 
     w = (w/2) - (img_w/2); 
     h = (h/2) - (img_h/2); 
     $("#pop").css("left", w + "px"); 
     $("#pop").css("top", h + "px"); 

     // Function to close the pop-up 
     $("#close").click(function() { 
      $("#pop").fadeOut('slow'); 
      $("#mask").fadeOut('slow'); 
     }); 
    }); 
</pre>

來源

2014-04-24 11:29:57

你是那麼對！ z-index參數是錯誤的，'mask'div的位置也是錯誤的。現在，它工作得很好:)謝謝！ – ediaz

當然！對不起，我沒有這麼做過：P順便說一句，這是我的jsp怎麼看起來像現在：

... Show pop-up ...

– ediaz

看看.......... HTTPS： //gist.github.com/madan712/4546371 –

你嘗試過在你的CSS使用display:none，而不是在jQuery的使用功能hide()中，$('#showBtn').click使用再經過你function show()而這個函數裏面就到你的popup CSS和改變顯示阻止並停用底色。

來源

2014-04-24 11:13:53

非常感謝您的幫助。我試圖做你說的話，它與彈出窗口一起工作，但它沒有與掩碼一起工作，因爲這個div的位置是錯誤的。這是問題所在。 @Vinita找到了:) – ediaz

你是最受歡迎的傢伙 –

當div彈出時禁用背景

回答

相關問題