禁用一切，而弹出打开

我通过点击一个按钮打开一个弹出式（＃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

禁用一切，而弹出打开

回答

相关问题