Open and Close bootstrap modal using jquery?


I have a requirement to open and close bootstrap modal using jquery or javascript , as I have to kept it open until some background task is complete and after that close bootstrap modal pop-up as soon as task is completed succesffuly, how can iI achieve it using jquery-javascript?


Asked by:- pika
3
: 3416 At:- 8/31/2017 11:20:42 AM
jQuery bootstrap modal-pop-up modal-dialog







3 Answers
profileImage Answered by:- jaiprakash

To close bootstrap modal you can use 'hide' as option to modal method as follow

$('#modal').modal('hide');

similarly, to open Modal pop-up using jquery, you can use

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

Or you can simply toggle the state of Modal pop-up using this Jquery Toggle

$('#modal').modal('toggle');

Using Pure Javascript to open or close Bootstrap Modal

To Close (Using Bootstrap 5)

var myModalEl = document.getElementById('myModal');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.hide();

To Open:

var myModalEl = document.getElementById('myModal');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.show();

That's it.

Related Questions:

Disable modal pop-up from closing when clicking outside it

How to call jQuery function when pop-up modal is opened or closed?

4
At:- 9/1/2017 7:17:42 AM Updated at:- 11/23/2022 6:01:27 AM
as I wanted, good answer 0
By : pika - at :- 9/4/2017 7:43:47 AM


profileImage Answered by:- vikas_jk

Bootstrap has a few functions that can be called manually on modals:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

You can see more here: Bootstrap modal component

Sometimes jQuery get's conflicted due to some plugins which cause errors or we include jquery twice by mistake and above code doesn't work, in this case, add

jQuery.noConflict(); 
$('#myModal').modal('show');  // to show Modal pop-Up with Id 'myModal'
$('#myModal').modal('hide'); // to hide Modal pop-Up with Id 'myModal'
2
At:- 9/1/2017 8:09:20 AM Updated at:- 9/1/2017 8:09:44 AM


profileImage Answered by:- manish

You can also try the below method

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

you need to place this code inside jQuery document.ready function.

0
At:- 9/7/2018 12:49:03 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use