I want to have a full screen bootstrap modal automatically pop open after x seconds ( I also want it to work as a modal button on the page). I have the full screen part working with a button, but when I apply any new javascript to it, it seems to disable the button all together and that's where I get stuck.

I've read the bootstrap modal documentation, w3 schools, etc.. I spent an hour on google and here, and all I can find is how to close it after x seconds which doesn't apply here. This seems like something that would be very monly used.. why do I feel like I'm searching for a needle in a haystack?

I tried adding this and it didn't work:

$(document).ready(function() {

    $("#fsModal").delay(2000).fadeIn(500);

});

Here's my code: /

Any help is very appreciated!!

I want to have a full screen bootstrap modal automatically pop open after x seconds ( I also want it to work as a modal button on the page). I have the full screen part working with a button, but when I apply any new javascript to it, it seems to disable the button all together and that's where I get stuck.

I've read the bootstrap modal documentation, w3 schools, etc.. I spent an hour on google and here, and all I can find is how to close it after x seconds which doesn't apply here. This seems like something that would be very monly used.. why do I feel like I'm searching for a needle in a haystack?

I tried adding this and it didn't work:

$(document).ready(function() {

    $("#fsModal").delay(2000).fadeIn(500);

});

Here's my code: http://jsfiddle/nqa1sbko/

Any help is very appreciated!!

• javascript
• jquery
• twitter-bootstrap
• modal-dialog

Share Improve this question Follow edited Oct 8, 2015 at 16:13 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Oct 8, 2015 at 13:47 Steve HSteve H 3111 silver badge44 bronze badges 1

• 2 Add this in ready, setTimeout(function() { $('#fsModal').modal('show'); }, 2000); Check Demo – Tushar Commented Oct 8, 2015 at 13:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

fadeIn will not work since the modal is not opened. You have to call the modal method with show option.

$('#fsModal').modal('show');

You can use it in a setTimeout:

setTimeout(function() {
    $('#fsModal').modal('show');
}, 2000);

If you want a fadeIn animation, just specify it in the modal options.

I edited your fiddle : http://jsfiddle/nqa1sbko/2/

Try the FIDDLE,

You have to initialize the model without specifying the 'show' as a parameter, then after you can use fadeIn api.

$(function() {
    // .modal-backdrop classes
    $(".modal-fullscreen").on('show.bs.modal', function() {
        setTimeout(function() {
            $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
        }, 0);
    });
    $(".modal-fullscreen").on('hidden.bs.modal', function() {
        $(".modal-backdrop").addClass("modal-backdrop-fullscreen");
    });


    $('#fsModal').modal().fadeIn(1000); // Here x = 1000

});

Thanks