CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialog
Steve H
Steve H

Reputation: 31

Open a Bootstrap Modal automatically after x seconds

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 commonly 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.net/nqa1sbko/

Any help is very appreciated!!

Upvotes: 3

Views: 4603

Answers (2)

Mayank
Mayank

Reputation: 1392

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

Upvotes: 0

Magus
Magus

Reputation: 15124

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.net/nqa1sbko/2/

Upvotes: 5

Related Questions