Bootstrap Modal aktivieren Hintergrund

Question

Ich möchte mein Bootstrap Modal offen sein, aber die Seite im Hintergrund noch anklickbar sein.

Es gibt ein paar Lösungen im Web und stackoverflow (wie How do I make the background of a modal clickable), die ich versuchte, aber ich konnte es nicht zum Laufen bringen. Ich arbeite mit Firefox und IE11.

Was ich versuche zu erreichen: Haben Sie einen Knopf an der Seite der Seite, die die modale öffnet, tun Sachen mit Modellinhalt, in der Nähe modal entweder mit Klick auf den Button in der Kopf oder mit Klick auf den Button, der die geöffnet Modal.

Es gibt eine working Bootply example wo ich versuche, Sachen von, ohne viel Erfolg so weit anzupassen. Dies ist

, wie weit ich habe:
Modal
(die html unten in Javascript erzeugt wird, ich Sie nur die Ausgabe für eine bessere Lesbarkeit geben)

<div id="bootstrapModal" class="modal fade" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
       </div> 
       <div class="modal-body"> 

       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-success " id="submitButton">Submit</button> 
        <button type="button" class="btn btn-danger" data-dismiss="modal" >Cancel</button> 
       </div> 
      </div> 
     </div> 
    </div> 

Javascript

var modal = $('#bootstrapModal'); 
$('.modal-backdrop', modal).css('display', 'none'); 
$('.modal-dialog',modal).css('pointer-events', 'none'); 
$('.modal-content',modal).css('pointer-events', 'all',); 

$(modal).modal('show'); 

Was ich bekomme ist ein Modal ohne Hintergrund aber die Möglichkeit zu interagieren mit dem Hintergrund (Hintergrund sieht aus wie es aktiv ist, aber es ist nicht). Ich bekomme den gleichen Effekt mit

$(modal).modal({backdrop: 'static', keyboard: false}); 

oder wenn 'static' in backdrop mit false ersetzen.

Irgendwelche Ideen?

Answer 1

Sie müssen die .modal-Klasse ändern/überschreiben. Wenn Ihr Fenster geöffnet ist, wenn Sie den Hintergrund mit Ihrem Web Inspector überprüfen, werden Sie sehen, dass alles in einem Div mit den Klassen enthalten ist: modal, Fade und in. Die Klasse "modal" verfügt über die folgenden css-Eigenschaften, mit denen der gesamte Bildschirm abgedeckt wird und Ihre Website nicht durch Anklicken geschützt werden kann.

.modal { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1050; 
    display: none; 
    overflow: hidden; 
    -webkit-overflow-scrolling: touch; 
    outline: 0; 
} 

Sie würden die feste Eigenschaft zu löschen oder die oben, ändern rechts, Boden und links Eigenschaften. Wenn Sie jedoch die fixierte Eigenschaft entfernt haben, können Sie die Eigenschaft z-index nicht mehr verwenden, wodurch Ihr Popup den Overlay-Effekt erhält.

Answer 2

wenn ich das Problem verstehen, müssen Sie div hinter dem Modell setzen und geben Sie es in voller Breite und Höhe der Seite