打开弹出窗口时在后台禁用所有内容

问题描述：

我通过单击按钮(#but1)打开一个弹出窗口，并通过应用以下jquery使用按钮(#but2)将其关闭-

I open a pop-up by clicking on a button(#but1) and close it using button(#but2) by applying following 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来做到这一点吗?

But, I want to disable the background as my pop-up appears. As my pop-up appears the mouse-hover effects should be disabled, along with it, i also should not be able to click on anything at the back-ground. How can i achieve this? Is it possible to do this using CSS only?

答

只需将其放在另一个填充页面(并显示该页面)的容器中:

Just put it inside another container that fills the page (and show that):

$(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>

打开弹出窗口时在后台禁用所有内容

相关推荐