Включить фон при открытии начальной загрузки модальных всплывающей

Question

Я использовал модальное всплывающее меню начальной загрузки в моем проекте и хочу следующие вещи:

1. когда открыто модальное всплывающее окна и нажмите на фоне всплывающих окнах не должен закрывать.
2. Когда открытый модальный всплывающий фон не должен размываться. смысл открытия модального всплывающего фона никоим образом не должен влиять.
3. После того как открытый модальный всплывающий пользователь также может работать на фоне, время всплывающего окна не должно закрываться.

Answer 1

1) Когда всплывающее окно открытой модели и щелчок по фону всплывающее окно не должно закрываться.

Включать данные атрибуты data-keyboard="false" data-backdrop="static" в самом определении модального:

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

2) При открытой модели всплывающего фон не должен стираться. смысл всплывающего фона всплывающего окна не должен влиять ни на что.

Установить .modal-backdrop значение свойства display:none;

.modal-backdrop { 
    display:none; 
} 

3) После того, как открытая модель всплывающого пользователя также может работать на фоне того, что время всплывающего окно не следует закрывать.

Добавить значения в .modal-open .modal

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

Sidenote: Вы, возможно, потребуется отрегулировать ширину модального по размеру с запросами средств массовой информации на экране.

Отказ от ответственности: Этот ответ должен продемонстрировать, как достичь всех трех целей. Если у вас есть более одного мода, вышеизложенные изменения будут влиять на все модальности, предлагая использовать пользовательские селектора.

.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