Abilita sfondo quando è aperto bootstrap modale popup

Question

ho usato popup modale di bootstrap nel mio progetto e vogliono seguenti cose:

1. volta aperto popup modale e cliccare sullo sfondo pop-up non dovrebbe chiudere.
2. Quando lo sfondo popup modale aperto non deve risultare sfocato. il che significa aprire lo sfondo popup modale non dovrebbe influire in alcun modo.
3. Dopo l'apertura di popup modali, l'utente può anche lavorare sullo sfondo che il popup temporale non dovrebbe chiudere.

Answer 1

1) Quando il popup del modello aperto e il clic sul popup in background non devono essere chiusi.

includere gli attributi dei dati data-keyboard="false" data-backdrop="static" nella definizione modale stesso:

<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static"> 
    // Modal HTML Markup 
</div> 

2) Una volta aperto il modello pop-up sfondo non deve offuscare. il che significa che l'apertura del popup del modello non dovrebbe influire in alcun modo.

Set .modal-backdrop valore della proprietà di display:none;

.modal-backdrop { 
    display:none; 
} 

3) dopo che l'utente modello open pop-up può anche lavorare sullo sfondo che il tempo popup non deve chiudere.

aggiungere i valori in .modal-open .modal

.modal-open .modal { 
    width: 300px; 
    margin: 0 auto; 
} 

SideNote: potrebbe essere necessario regolare la larghezza del modal in base alle dimensioni dello schermo con le media query.

Disclaimer: Questa risposta è solo per dimostrare come raggiungere tutti e 3 gli obiettivi Se si dispone di più di un bootstrap modale, le modifiche sopra indicate avranno effetto su tutte le modali, suggerendo altamente l'uso di selettori personalizzati.

.modal-backdrop { 
 
    display: none !important; 
 
} 
 
.modal-open .modal { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
<br> This is a text and can be selected for copying 
 
<br> This is a text and can be selected for copying 
 
<br> This is a text and can be selected for copying 
 
<br> This is a text and can be selected for copying 
 
<br> 
 

 
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Working Fiddle Example