Диалоговое окно JQuery UI поверх Bootstrap

Question

У меня есть мода Bootstrap, которая показывает заполнение некоторых данных, если данные неверны, на самом деле я показываю предупреждение, и оно отображается сверху.

Теперь у меня есть новое требование, создайте настраиваемые диалоговые окна предупреждений. В других частях формы нет проблем, но когда у меня есть мода Bootstrap, если я показываю модальный обычным образом, он появляется в нижней части модального модуля Bootstrap (example in this fiddle).

Я смотрел другие вопросы, как this и this, и я попытался с z-index (example in this fiddle) и диалоговыми шоу в верхней части, но я не могу щелкнуть в любом месте

$(".ui-dialog").css({ 'z-index' : 1000 });  
$("#myModal").css({ 'z-index' : 0 }); 

Также я попытался отключить модально и включить диалог без успеха.

this answer Правильно, и я не могу добиться этого без дополнительных плагинов?

Answer 1

z-index В умолчанию начальной загрузки модального окна, как это определено в variables.less файл находится в 1050.

@ zindex-modal: 1050;

Так что, если вы хотите разместить свой диалог JQuery-UI выше, что вы, по крайней мере, добавить значение z-index, которое больше, чем один из модального окна. Или измените модальное окно z-index на что-то ниже, но я бы этого не сделал.

$("#btnalert").click(
 
    function action() { 
 
    alert("this is an alert on top"); 
 
    } 
 
); 
 

 
$("#btndialog").click(
 
    function action() { 
 
    $("#dialog").html("dialog on the back"); 
 
    $("#dialog").dialog(); 
 
    $(".ui-dialog").css({ 
 
     zIndex: '1060', 
 
     top: '100px' 
 
    }); 
 
    prepareDialog(); 
 
    
 
    } 
 
); 
 

 
function prepareDialog() { 
 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
 
    $(".ui-dialog-titlebar").css({ background: '#F7985D' }); 
 
    $(".ui-dialog .ui-dialog-content").css({ 'text-align': 'center' }); 
 
}

.ui-dialog { 
 
    /*z-index: 1060 !important;*/ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 

 

 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 

 
<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <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 class="btn btn-default" id="btnalert" >ALERT</button> 
 
     <button class="btn btn-default" id="btndialog" >DIALOG</button> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<div id="dialog" hidden></div>

Answer 2

попробовать это на вашей скрипке:

<button class="btn btn-default" data-dismiss="modal" id="btndialog" >DIALOG</button>