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
What Is the Meaning of the "At" (@) Prefix on Npm Packages
When to Use Setattribute VS .Attribute= in JavaScript
How to Check File Input Size with Jquery
Convert Utc Epoch to Local Date
React/Jsx Dynamic Component Name
How to Create a Dynamic Key to Be Added to a JavaScript Object Variable
How to Call a JavaScript Function on Page Load
How to Get Unique Values in an Array
Invariant Violation: Objects Are Not Valid as a React Child
Iframe Src Change Event Detection
How to Iterate Through Table Rows and Cells in JavaScript
JavaScript Regex Multiline Text Between Two Tags
Advantages of Createelement Over Innerhtml
Cross Origin Requests Are Only Supported for Http But It's Not Cross-Domain
JavaScript Regex: How to Put a Variable Inside a Regular Expression