禁用一切，而彈出打開

我通過點擊一個按鈕打開一個彈出式（＃but1）和（but2＃）通過將其關閉使用按鈕下面jquery-禁用一切，而彈出打開

$(document).ready(function(){ 
    $("#but1").click(function(){ 
      $("#popdiv").fadeTo(200,1);   
     }); 
    $("#but2").click(function(){ 
      $("#popdiv").fadeOut(200);    
     }); 
});

的CSS彈出是 -

#popdiv 
{ 
    height:300px; 
    width:420px; 
    background-color:#97ceaa; 
    position:fixed; 
    top:200px; 
    left:250px; 
    display:none; 
}

但是，我想禁用背景，因爲我的彈出窗口出現。當我的彈出窗口出現時，鼠標懸停效果應該被禁用，同時我也不應該點擊背景上的任何東西。我怎樣才能做到這一點？是否有可能只使用CSS來做到這一點？

來源

2017-06-02 trex1999

你能不能發佈相關的html代碼或者工作片段 – prasanth

在文章中的回答https://stackoverflow.com/questions/17103723/disable-background-using-css-when-popup-appear應該對你有幫助。 ...否則你可以提供html的細節給我們。 –

只是把它填充頁面另一個容器內（並且顯示）：

$(function() { 
 
    $("#but1").click(function() { 
 
    $(".fullscreen-container").fadeTo(200, 1); 
 
    }); 
 
    $("#but2").click(function() { 
 
    $(".fullscreen-container").fadeOut(200); 
 
    }); 
 
});

.fullscreen-container { 
 
    display: none; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(90, 90, 90, 0.5); 
 
    z-index: 9999; 
 
} 
 

 
#popdiv { 
 
    height: 300px; 
 
    width: 420px; 
 
    background-color: #97ceaa; 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 50px; 
 
} 
 

 
body { 
 
    padding-top: 65px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="but1">Open dialog</button> 
 
<div class="fullscreen-container"> 
 
    <div id="popdiv"> 
 
    <h1> 
 
     Dialog content! 
 
    </h1> 
 
    <button id="but2">Close dialog</button> 
 
    </div> 
 
</div>

來源

2017-06-02 11:41:19 Arg0n

請問爲什麼你用z-index這麼高的數字？ – Gezzasa

@Gezzasa爲了使這個元素最有可能位居前列。 – Arg0n

這就是我要找的....謝謝.... – trex1999

您可能希望這樣：

的背景下週圍的彈出式窗口覆蓋整個屏幕上的其他元素。
的結構是這樣的：

+--------------------+ 
| BackDrop   | 
|     | 
| +--------------+ | 
| | Pop Up  | | 
| |    | | 
| +--------------+ | 
|     | 
|     | 
+--------------------+

例

$(document).ready(function() { 
 
    $("#but1").click(function() { 
 
    $(".backdrop").fadeTo(200, 1); 
 
    }); 
 
    $("#but2").click(function() { 
 
    $(".backdrop").fadeOut(200); 
 
    }); 
 
});

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#popdiv { 
 
    height: 40%; 
 
    width: 30%; 
 
    background-color: #97ceaa; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
} 
 

 
.backdrop { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 999; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="but1">Open</button> 
 
<div class="backdrop"> 
 
    <div id="popdiv"> 
 
    <button id="but2">Close</button 
 
</div> 
 
</div>

來源

2017-06-02 11:43:23

創建背景div與propertie z-index，例如：

#disableDiv { 
    position: fixed; 
    padding: 0; 
    margin: 0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0.5; 
    background-color: black; 
    z-index: 1; 
    display: none; 
}

在顯示彈出窗口之前，顯示背景div，它將無法點擊/懸停在它後面的元素上。

來源

2017-06-02 11:43:41

禁用一切，而彈出打開

回答

相關問題