Bootstrap modal event doesn't trigger

Bootstrap modal event doesn't trigger - javascript

I'm trying to bind an some code to trigger when my modal is opened. I have no trouble opening the modal but for some reason i can't figur out my event doesn't triggered.
Here is my modal
<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p id="modal-body" class="text-defualt text- text-normal text-left"></p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
And here is my JS script i'm trying to get to run
<script>
$(function(){ // let all dom elements are loaded
$("#details").on("show.bs.modal", function (e) {
alert("event fired");
});
})
</script>'
I'm using bootstrap 3.3 and jQuery v1.11.2
Let me know if any more info would help solve the issue
Thanks in advance

Please try below code:
Assuming you are opening modal popup on click of any button; add below code, it should work:
Refer this fiddle
<script>
$(function(){ // let all dom elements are loaded
$(document).on('show.bs.modal','#details', function () {
alert('hi');
});
});
</script>

Your code fires the modal and the alert. Did you remember to include JQuery?
Try this CodePen Demo
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#details">
Launch demo modal
</button>
<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p id="modal-body" class="text-defualt text- text-normal text-left">I work</p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function() {
$("#details").on("show.bs.modal", function(e) {
alert("event fired");
});
});
</script>

Here you go with a solution https://jsfiddle.net/kxr2subr/
$(function(){ // let all dom elements are loaded
$("#details").on("show.bs.modal", function (e) {
alert("event fired");
});
$('button').click(function(){
$('#details').modal({show: true});
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button>
Open Modal
</button>
<div id="details" class="modal fade" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p id="modal-body" class="text-defualt text- text-normal text-left"></p>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
I guess you are missing bootstrap.min.js file.

Related

How to change Bootstrap modal content depending on button click

I need to be able to change the content inside a modal depending on the button that is clicked.
For instance, if button one is clicked it will only show the div with class 'one' and the others will remain hidden.
$('#exampleModalCenter').modal('toggle')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">one</button>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">two</button>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn" data-toggle="modal" data-target="#exampleModalCenter">three</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="one">Button one content</div>
<div class="two">Button two content</div>
<div class="one">Button three content</div>
</div>
</div>
</div>
</div>

Example below. The logic: Whenever you click a button, hide all the content first, then you show the specific content based on the button you clicked.
Ref.: https://getbootstrap.com/docs/3.3/javascript/#modals-related-target
$(".btn").click(function () {
$(".parent").children().each(function () {
$(this).hide();
});
$(`div.${$(this).attr("id")}`).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button
id="one"
type="button"
class="btn"
data-toggle="modal"
data-target="#exampleModalCenter"
>
one
</button>
<button
id="two"
type="button"
class="btn"
data-toggle="modal"
data-target="#exampleModalCenter"
>
two
</button>
<button
id="three"
type="button"
class="btn"
data-toggle="modal"
data-target="#exampleModalCenter"
>
three
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalCenter"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="parent">
<div class="one">Button one content</div>
<div class="two">Button two content</div>
<div class="three">Button three content</div>
</div>
</div>
</div>
</div>
</div>

You can look at this tutorial :
https://getbootstrap.com/docs/3.4/javascript/#modals-related-target
Simply add a data attribute to your button :
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="one">Open modal for One</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="two">Open modal for Two</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#yourModal" data-name="three">Open modal for Three</button>
And when the event occur, you can recover the attribute of the button and adapt the behavior according to it :
$('#yourModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('name'); // Extract info from data-* attributes
// Here, you can change the behavior according to the button clicked :
switch(recipient) {
case 'one':
$('.one').show();
break;
case 'two':
$('.two').show();
break;
// etc...
}
});

You could subscribe to the modal's show.bs.modal event, check the value of the relatedTarget property of the event and then show/hide internal divs based on that target value

$(document).on("click",".modal-open",function(){
var button_val = $(this).attr("data-val");
$('#exampleModalCenter').modal('show');
$(".conditional-div").hide();
$("#exampleModalCenter ."+button_val).show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn modal-open" data-val="one" >one</button>
<button type="button" class="btn modal-open" data-val="two" >two</button>
<button type="button" class="btn modal-open" data-val="three" >three</button>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="one conditional-div">Button one content</div>
<div class="two conditional-div">Button two content</div>
<div class="three conditional-div">Button three content</div>
</div>
</div>
</div>
</div>

You can do this :
$('button.btn-open-modal').on('click', function(){
let targetClass = $(this).attr("target-class");
$("#exampleModalCenter div.modal-body > div").each(function(){
if($(this).hasClass(targetClass)){
$(this).show();
}else {
$(this).hide();
}
});
$('#exampleModalCenter').modal('toggle');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-open-modal" target-class="one">one</button>
<button type="button" class="btn btn-open-modal" target-class="two">two</button>
<button type="button" class="btn btn-open-modal" target-class="three">three</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="one">Button one content</div>
<div class="two">Button two content</div>
<div class="three">Button three content</div>
</div>
</div>
</div>
</div>

Cloned button can't open modal

The 2nd button that I cloned can't open the modal... how can I fix that?
enter link description here

Use clone(true) according to the documentation
$(document).ready(function() {
$(".myBtn").click(function() {
$("#myModal").modal();
});
$("#mode").click(function() {
$(".ok").clone(true).appendTo("#clones");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="ok" id="notok">
<select>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<button type="button" class="myBtn" id="myBtn">Open Modal</button>
</div>
<div id=clones></div>
<button id="mode">Clone</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>

Try to delegate event
$("body").on('click', '.myBtn',function(){
$("#myModal").modal();
});

Pass true in clone
$(document).ready(function(){
$(".myBtn").click(function(){
$("#myModal").modal();
});
$("#mode").click(function(){
$(".ok").clone(true).appendTo("#clones");
});
});
Here is the link
https://jsfiddle.net/f7hjh1gf/1/

Try this-
$(document).ready(function(){
$(".myBtn").click(function(){
$("#myModal").modal();
});
$("#mode").click(function(){
$(".ok").clone(true).appendTo("#clones");
});
});

How to display div on click inside Bootstrap modal?

I have a ussual modal window of Bootstrap and there I have a div which is hidden by default. I want to click on link (which is also inside this modal) and display it. Problem is that I could't make click on link and therefore my div still hedden.
Maybe someone had same problem or can give me good advice how to solve this task?
sorry that I did't post the code before I asked
<div class="modal fade js-custom-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="f-item f-item-modal">
<!--./f-item__details-->
<div class="f-item__info">
<div class="f-item__head modal-view">content</div>
<div class="f-item__short _border">content</div>
<div class="f-item__requirements">content</div>
<div class="f-item__body">
<div class="f-item__dest">
<i><img src="....png" alt="route"></i>THIS MUST DISPLAY div.f-item__map
</div>
</div>
<div class="f-item__map">
<iframe src="..." frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="f-item__footer modal-view"></div>
</div>
</div>
</div>
</div>
</div>
</div>
here is my jQuery code
$('a.display-route').click(function(e){
e.preventDefault;
$('.f-item__map').toggleClass('js-route');
});
at CSS
.js-route { display: block;}

I have tried it. Please have a look.
$(document).ready(function(){
$("a.insidemodal").click(function(){
$("div.abc").css("display","block");
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<a class="insidemodal">Some text in the modal.</a>
<div class="abc" style="display:none">I am hidden unless clicked by an anchor</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

You have to give us more details. But classical problems here could be a delegation event problem with your link.
Ask you this question: Does your link exist at the moment you add the on("click" ... ?

$('#link').click(function() {
$('#div').css('display','block');
});
This is just an example. Its better if you can post your code here.

The text is not displaying when I add it from "append" using jQuery

$(window).load(function(){
var value = $( '#event-id' ).text();
$(window).ready(function(){
$('#send-event').click(function(){
// alert('clicked');
$( ".events" ).append( '<li class="event-item">' + value + '</li>' );
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add Event
</button>
<div class="row">
<div class="col-md-3">
<ul class="events">
<li class="event-item"></li>
</ul>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" name="event-input" id="event-id">
</div>
<div class="modal-footer">
<button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
</div>
</div>
</div>
</div>
Here's the code which I was developed for append the text from the input which is in modal, the problem is the li tag is appending but not the text in it.
I really not able to understand what mistake I did, can any one explain what mistake am doing.
Here's the Fiddle link.

As mentioned in the other answer, you are working with an input element, so you should use val instead of text. However, that alone won't fix this because the variable is being defined outside of the function.
It should be inside the click function, so it's updated during every click event. To clear the input , simply set the value to n empty string.
$(window).load(function(){
$(document).ready(function(){
$('#send-event').click(function(){
var value = $( '#event-id' ).val();
$( ".events" ).append( '<li class="event-item">' + value + '</li>' );
$("#event-id").val("");
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add Event
</button>
<div class="row">
<div class="col-md-3">
<ul class="events">
<li class="event-item"></li>
</ul>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" name="event-input" id="event-id">
</div>
<div class="modal-footer">
<button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
</div>
</div>
</div>
</div>

change
var value = $( '#event-id' ).text();
to
var value = $( '#event-id' ).val();

Because that $( '#event-id' ) will change between $('#send-event') clicks, you probably don't want to cache it's value — and it is its .val() you want, not the .text() — outside of the click handler. Otherwise, the $( '#event-id' ).val() will only ever be whatever it was when the page first loaded.
$(window).load(function(){
$(window).ready(function(){
$('#send-event').click(function(){
var value = $( '#event-id' ).val();
// alert('clicked');
$( ".events" ).append( '<li class="event-item">' + value + '</li>' );
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add Event
</button>
<div class="row">
<div class="col-md-3">
<ul class="events">
<li class="event-item"></li>
</ul>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<input type="text" name="event-input" id="event-id">
</div>
<div class="modal-footer">
<button type="button" id="send-event" class="btn btn-success" data-dismiss="modal">Add Event</button>
</div>
</div>
</div>
</div>

Launch Bootstrap Modal on Page Load

I don't know JavaScript at all. The Bootstrap documentation says to
Call the modal via JavaScript: $('#myModal').modal(options)
I have no clue how to call this on a page load. Using the supplied code on the Bootstrap page I can successfully call the Modal on an element click, but I want it to load immediately on a page load.

Just wrap the modal you want to call on page load inside a jQuery load event on the head section of your document and it should popup, like so:
JS
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
HTML
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
You can still call the modal within your page with by calling it with a link like so:
<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>

You don't need javascript to show modal
The simplest way is replace "hide" by "in"
class="modal fade hide"
so
class="modal fade in"
and you need add onclick = "$('.modal').hide()" on button close;
PS: I think the best way is add jQuery script:
$('.modal').modal('show');

Just add the following-
class="modal show"
Working Example-
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal show" id="myModal" 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>
</div>

You can try this runnable code-
$(window).load(function()
{
$('#myModal').modal('show');
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
More can be found here.
Think u have your complete answer.

Update 2021
Bootstrap 5
Now that Bootstrap no longer requires jQuery, it's easy to show the modal using JavaScript..
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
myModal.toggle()
Demo
Bootstrap 4
The modal markup has changed slightly for Bootstrap 4. Here's how you can open the modal on page load, and optionally delay display of the modal...
$(window).on('load',function(){
var delayMs = 1500; // delay in milliseconds
setTimeout(function(){
$('#myModal').modal('show');
}, delayMs);
});
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">My Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Demo

regarding what Andre's Ilich say you have to add
the js script
after the line in what you call the jquery:
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
$('#myModal').modal('show');
});
</script>
in my case that was the problem hope it helps

Tested with Bootstrap 3 and jQuery (2.2 and 2.3)
$(window).on('load',function(){
$('#myModal').modal('show');
});
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><i class="fa fa-exclamation-circle"></i> //Your modal Title</h4>
</div>
<div class="modal-body">
//Your modal Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
https://jsfiddle.net/d7utnsbm/

In my case adding jQuery to display the modal didn't work:
$(document).ready(function() {
$('#myModal').modal('show');
});
Which seemed to be because the modal had attribute aria-hidden="true":
<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Removing that attribute was needed as well as the jQuery above:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
Note that I tried changing the modal classes from modal fade to modal fade in, and that didn't work. Also, changing the classes from modal fade to modal show stopped the modal from being able to be closed.

You can activate the modal without writing any JavaScript simply via data attributes.
The option "show" set to true shows the modal when initialized:
<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

Heres a solution [without javascript initialization!]
I couldn't find an example without initializing your modal with javascript, $('#myModal').modal('show'), so heres a suggestion on how you could implement it without javascript delay on page load.
Edit your modal container div with class and style:
<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">
Edit your body with class and style:
<body class="modal-open" style="padding-right:17px;">
Add modal-backdrop div
<div class="modal-backdrop in"></div>
Add script
$(document).ready(function() {
$('body').css('padding-right', '0px');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
$('#MyModal').modal('show'); });
What will happen is that the html for your modal will be loaded on page load without any javascript, (no delay). At this point you can't close the modal, so that is why we have the document.ready script, to load the modal properly when everything is loaded. We will actually remove the custom code and then initialize the modal, (again), with the .modal('show').

Like others have mentioned, create your modal with display:block
<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...
Place the backdrop anywhere on your page, it does not necesarily need to be at the bottom of the page
<div class="modal-backdrop fade show"></div>
Then, to be able to close the dialog again, add this
<script>
$("button[data-dismiss=modal]").click(function () {
$(".modal.in").removeClass("in").addClass("fade").hide();
$(".modal-backdrop").remove();
});
</script>
Hope this helps

In addition to user2545728 and Reft answers, without javascript but with the modal-backdrop in
3 things to add
a div with the classes modal-backdrop in before the .modal class
style="display:block;" to the .modal class
fade in together with the .modal class
Example
<div class="modal-backdrop in"></div>
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="channelModal">Welcome!</h4>
</div>
<div class="modal-body" style="height:350px;">
How did you find us?
</div>
</div>
</div>
</div>

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<p><i class="icon-spinner icon-spin icon-4x"></i></p>
</div>
</div>
You can show it on start even without Javascript. Just delete the class "hide".
class="Modal"

Update 2020 - Bootstrap 5
Building on the excellent responses from previous answers, in Bootstrap 5 with no jQuery, this has worked;
document.querySelector('[data-target="#exampleModal"]').click();
Full snippet:
window.onload = () => {
document.querySelector('[data-target="#exampleModal"]').click();
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container py-3">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>

In bootstrap 3 you just need to initialise the modal through js and if in the moment of the page load the modal markup is in the page the modal will show up.
In case you want to prevent this, use the option show: false where you initialise the modal. Something like this:
$('.modal').modal({ show: false })

you can using jQuery to handle this
first import on your template
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
and hit the id on your modal with jQuery Script
<script type="text/javascript">
$(window).on('load', function() {
$('#staticBackdrop').modal('show');
});
</script>
here is the modal for case display django message
{% if messages %}
{% for message in messages %}
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{ message }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}

You may want to keep jquery.js deferred for faster page load. However, if jquery.js is deferred the $(window).load may not work. Then you may try
setTimeout(function(){$('#myModal').modal('show');},3000);
it will popup your modal after page is completely loaded (including jquery)

In order to avoid bootstrap being overruled and loosing it´s funcionality, simply create a regular launch button, provide it with an Id, and 'click it' using jquery, like so:
The launch button:
<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
See what´s new!
</button>
The jQuery trigger:
$(document).ready(function () {
$('#btnAnouncement').click();
)}
Hope it helps. Cheers!

I recently needed to launch a Bootstrap 5 modal without jQuery and not with a button click (eg, on page load) using Django messages. This is how I did it:
Template/HTML
<div class="modal" id="notification">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Notification!</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{% for m in messages %}
{{ m }}
{% endfor %}
</div>
<div class="modal-footer justify-content-between">
<a class="float-none btn btn-secondary" href="{% url 'some_view' %}"
type="button">
Link/Button A
</a>
<button type="button" class="btn btn-primary"
data-bs-dismiss="modal">
Link/Button B
</button>
</div>
</div>
</div>
</div>
JS in a file or in the template
{% block javascript %}
{{ block.super }}
<script>
var test_modal = new bootstrap.Modal(
document.getElementById('notification')
)
test_modal.show()
</script>
{% endblock javascript %}
This method will work without the Django template; just use the HTML and put the JS in a file or script elements that loads after the Bootstrap JS before the end of the body element.

maybe it's late but, once I was not able to solve this order issue, and modal was not getting shown; I used jquery click();
I tried this and it worked well :)
create a button, which calls Modal show > style that button as display : none;
Example :
$( "#clickme" ).click();
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<input type="button" value="0" id="clickme" style="display:none;" data-toggle="modal" data-target="#exampleModal" />
<!-- Modal -->
<div id="exampleModal" class="modal" 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">Clicked Successfully</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>
</body></html>

In JS:
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
Boostrap Modal in HTML:
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Alert</h4>
</div>
<div class="modal-body">
<p><?= session('msg') ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
replace myModal with your's

We Keep Coding

JavaScript is the programming language of the Web.

Bootstrap modal event doesn't trigger - javascript

Please try below code: Assuming you are opening modal popup on click of any button; add below code, it should work: Refer this fiddle <script> $(function(){ // let all dom elements are loaded $(document).on('show.bs.modal','#details', function () { alert('hi'); }); }); </script>

Related

How to change Bootstrap modal content depending on button click

Cloned button can't open modal

How to display div on click inside Bootstrap modal?

The text is not displaying when I add it from "append" using jQuery

Launch Bootstrap Modal on Page Load

Categories

Resources