Disable alles im Hintergrund, während ein Popup geöffnet wird

Question

ich ein Popup öffnen, indem Sie auf eine Schaltfläche klicken (# but1) und schließen Sie sie mit der Taste (# but2) von jquery-

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

folgende Anwendung

Die CSS für das Pop-up ist -

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

Aber ich den Hintergrund, wie mein Popup erscheint deaktivieren möchten. Wenn mein Popup-Fenster erscheint, sollten die Maus-Hover-Effekte deaktiviert werden, und ich sollte auch nicht im Hintergrund etwas anklicken können. Wie kann ich das erreichen? Ist es möglich, dies nur mit CSS zu tun?

Answer 1

Setzen Sie ihn einfach in einem anderen Container, der die Seite (und zeigen, dass) füllt:

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

Answer 2

Sie könnte dies wollen:

Eine Kulisse rund um Ihr Popup, die deckt die gesamter Bildschirm über anderen Elementen.
Eine Struktur wie folgt aus:

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

Beispiel

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

Answer 3

erstellen Hintergrund div mit dem propertie z-index, zum Beispiel:

#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; 
} 

Bevor Sie Ihr Popup anzeigen, zeigen Sie den Hintergrund div, es wird unmöglich machen, auf die Elemente "dahinter" zu klicken/zu schweben.