bootstrap 3 modal dialog not rendering as it should

Question

bootstrap 3 modal dialog not rendering as it should

2.7k Views Asked by Apostolos At 21 October 2024 at 23:29

I have the following javascript code

$("#modal-yes-button").click(function (){
    $("#myModal").modal('hide');
    $(".modal-body").load('/url/that/returns/an/html/');
    $("#myModal").modal('show');
});

and the following modal

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">
                <h3>This is a question answer yes or later</h3>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Maybe Later</button>
                <button id="modal-yes-button" class="btn btn-info" aria-hidden="true">Yes</button>

            </div>
        </div><!--modal-content-->
    </div><!--modal-dialog-->
</div><!--myModal-->

I want the usere to press the yes button hide the modal(it says that bootstrap won't allow modal open when another one is open) load the new html content for the .modal-body and dipslay the modal dialog again. Only what i get is black screen(like when it shadows for the modal to appear) but the modal never appears. I played with it using the chrome dev tools and the modal appears normally

chrome dev-tools

modaldialog = $("#myModal");
modaldlgBody = $(".modal-body");
modaldlgBody.load('/url/that/returns/html/');
modaldialog.modal('show');

With the above commands the new new "body" is loaded normally. But if i try to load the dialog first and then press the yes button even when triggering the modal from the chrome dev-tools i get the same behavour, black screen. What could be wrong?

chrome dev-tools that giving the same black screen

modaldialog = $("#myModal");
modaldialog.modal('show');
#pressing yes gets me the same black screen.

Original Q&A

There are 3 best solutions below

**Apostolos** · Answer 1

This is how it worked. I had to run the code

$dlg.appendTo('body');
$("#id_of_new_modal").modal('show');

instead of

$dlg.appendTo('body').modal('show');

I am not quite sure why this is like this. I thought using $ is a jquery object so

$dlg.appendTo('body').modal('show');

should have worked. But it didn't. If you have any ideas why please comment I like to know the why in things :)

**LeGEC** · Answer 2

First off, you should wait for the closing animation to finish before reopening your dialog.

You can listen to the hidden.bs.modal event :

$('#myModal').on('hidden.bs.modal', function(){
    $('#myModal').modal('show');
});

Now, this would pop back your modal each time you close it, even when clicking on the "dismiss" button. You want to listen to this event only once, when the user clicks on the "Yes" button. You can take advantage of the jQuery.one() binder :

$('#modal-yes-button').click(function(){
   $('#myModal').one('hidden.bs.modal', function(){
       $('#myModal').modal('show');
   }); 
   $('#myModal').modal('hide');     
});

fiddle

But I don't see a good reason to keep the very same dialog open - it includes a "Yes" button with specific logic, which would need to be changed after the load completes ...

You can serve a complete dialog, using $.get, and simply display that :

$('#modal-yes-button').click(function(){
    $('#myModal').modal('hide');
    $.get(url, function(html){
        //html should contain a complete modal markup, including
        // .modal, .modal-header, .modal-body ...
        var $dlg = $(html);
        // if needed, add specific handlers :
        $dlg.on('click', '#whatever', function(){ /*do stuff*/ });
        $dlg.appendTo('body').modal('show');
    });
});

**Random Identity** · Answer 3

The right answer should be placing the modal in the top of the document.

just before the body tag ends or just after the body tag start , there could be only one level of nesting

<body>  
<div>
    <!-- no other nesting -->
    <!-- put modal here -->
    <div class="modal fade">
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
            <p>One fine body&hellip;</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
       </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
     </div><!-- .modal -->
     </div><!-- first div end here -->    
       </body>

bootstrap 3 modal dialog not rendering as it should

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in TWITTER-BOOTSTRAP

Related Questions in MODAL-DIALOG

Related Questions in JQUERY-LOAD

Trending Questions

Popular # Hahtags

Popular Questions