How to Open a Bootstrap Modal Window Using Jquery

How to open a Bootstrap modal window using jQuery?

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

Specifically the methods section.

So you would need to change:

$('#my-modal').modal({
show: 'false'
});

to:

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

If you're looking to make a custom popup of your own, here's a suggested video from another community member:

https://www.youtube.com/watch?v=zK4nXa84Km4

How to open a Bootstrap 4 modal dialog using jQuery

Your call to show the modal is fine, more than likely your Bootstrap library or your jQuery library is not loaded. Ensure that they are..

Here is a working example to confirm your method:

runCommands()

function runCommands() { // run commands $('#id-findModal').modal()}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<div id="id-findModal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div></div>

how to open a modal (bootstrap) using jQuery?

Checout out some of the points ..

1. First check if you have added the bootstrap library.

2. if added , than check if you have include jQuery before including bootstrap's javascript.Since bootstrap actually needs jQuery.

3. Check if you included library more than Once

For example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/bootstrap/js/bootstrap.min.js"></script>

and do this:

$(window).load(function() {

jQuery.noConflict();
$('#loader').modal('show');
});

If it does not work even now.. than remove your jquery and and bootstrap library and use bootstrap 3.3.5 and jquery 1.11.3.

Open Bootstrap 4 Modal via JavaScript by clicking a link

Trigger click event on a[href$="#Modal"].

$('a[href$="#Modal"]').on( "click", function() {   $('#Modal').modal('show');});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Trigger the modal with a button --><a href="#Modal" class="btn btn-info btn-lg">Open modal</a><!-- Modal --><div id="Modal" 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">×</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 type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div></div>
</div></div>

Link won't open Bootstrap modal

Try getting away from the loadModal function and use:

<a href="#" style="float:right;" data-toggle="modal" data-target="#myModal">Help?</a>

May need to remove the class "hide" from your modal.

Moving Bootstrap 3 Modal left in Yii2

In your code you start opening modal then you start loading its content right after. The modal showing doesn't wait for content loading. And, the content loading doesn't wait for modal either.
So it's basically gamble what will be finished first.

You can use load() method's complete callback to start showing modal after its content has been load:

$(document).on('click', '.btn-modal', function() {
var modal = $('#modalCreate');
modal.find('#modalContent').load($(this).attr('value'), function() {
modal.modal('show')
});
var title = $(this).attr('data-title');
});

The other option is bit more complicated. You can create two Promises, resolve one in shown.bs.modal event handler and another in load's complete callback. You can run the positioning code when both promises are resolved.



Related Topics



Leave a reply



Submit