Włącz tła przy otwartym bootstrap modalne popup

Question

Użyłem modalne okienko z bootstrap w moim projekcie i chce następujące rzeczy:

1. gdy są otwarte modalne okienko i kliknij popup tle nie powinien zamknąć.
2. Po uruchomieniu modalne tło podręczne nie powinno się rozmazać. znaczenie otwierania modalnego tła popup nie powinno wpływać w żaden sposób.
3. Po otwartym wyskakującym okienku modalnym użytkownik może również pracować na tle, którego okienko nie powinno się zamykać.

Answer 1

1) Gdy otwarte okno podręczne modelu i kliknięcie na wyskakującym okienku nie powinno się zamykać.

zawierać atrybuty dane data-keyboard="false" data-backdrop="static" w samej definicji modalnej:

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

2) Kiedy otwarte okienko wzór tła nie powinny zacierać. znaczenie otwarcie wyskakującego tła okna nie powinno wpłynąć w żaden sposób.

Set .modal-backdrop wartość nieruchomości do display:none;

.modal-backdrop { 
    display:none; 
} 

3) Po użytkownik Otwarty model podręcznego może również pracować w tle, że czas popup nie powinien blisko.

Dodaj wartości w .modal-open .modal

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

marginesie: może trzeba dostosować szerokość modalnego według rozmiaru ekranu z zapytaniami mediów.

Nota prawna: Ta odpowiedź ma jedynie ukazać, jak osiągnąć wszystkie 3 cele. Jeśli masz więcej niż jeden mod bootstrap, powyższe zmiany wpłyną na wszystkie modalności, co sugeruje użycie niestandardowych selektorów.

.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