1

I have a Bootstrap modal that shows for filling some data, if the data is incorrect, actually I show an alert and it appears on top.

Now I have a new requirement, create custom alert dialogs. In other parts of the form, there is not a problem, but when I have the Bootstrap modal, if I show the modal in a normal way, it appears in the bottom of the Bootstrap modal (example in this fiddle).

I've looked other questions like this and this and I've tried with z-index (example in this fiddle) and dialog shows in top, but I cannot click anywhere

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

Also I've tried to disable the modal and enable the dialog without success.

Is this answer correct, and there is no way I can achieve this without more plugins?

informatik01
  • 16,038
  • 10
  • 74
  • 104
Jordi Castilla
  • 26,609
  • 8
  • 70
  • 109

3 Answers3

3

The default z-index of the bootstrap modal window as defined in the variables.less file lies at 1050.

@zindex-modal: 1050;

So if you want to place your jquery-ui dialog above that you would at least have to add a z-index value that is greater than the one of the modal window. Or change the modal window z-index to something lower, but i would not do that.

$("#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>
DavidDomain
  • 14,976
  • 4
  • 42
  • 50
  • Almost working, you know how to make dialog position be relative to the modal? if you run the snippet in full screen it centers in the screen, but I have a long form, so I need the position to be relative to the modal... something like the alert, maybe 100px down... – Jordi Castilla Aug 04 '15 at 10:51
  • 1
    Made an edit to the post. Added `top` css position to the dialog. – DavidDomain Aug 04 '15 at 11:40
  • actually, this is not relative to the modal, is 100px top absolute but fair enough... original question is totally answered ;) – Jordi Castilla Aug 04 '15 at 12:00
2

As of version 1.10.0+, you can specify in your initialization where to "append" the dialog using the appendTo option and assign it your modal id. No changing of z-indexes anymore.

$("#yourDialogId").dialog({
        autoOpen: false,
        appendTo: "#yourModalId",
        modal: true,
});
Matthew Miranda
  • 138
  • 1
  • 3
  • 15
-2

try this one on your fiddle:

<button  class="btn btn-default" data-dismiss="modal" id="btndialog" >DIALOG</button>
bloC
  • 526
  • 3
  • 16
  • no way, I cannot discard the modal if I find unvalid data – Jordi Castilla Aug 04 '15 at 09:06
  • 1
    While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Kyll Aug 04 '15 at 09:48
  • @JordiCastilla It isn't a option to call another modal right? – bloC Aug 04 '15 at 10:04