We Keep Coding

How to Clear Content - Bootstrap Modal

Everytime I open a Bootstrap Modal form, I want a fresh load of content instead of adding to existing form (default behavior). So I want hello world to show on the form once instead of keep appending them to each other. I looked up how to do this on here and tried all answers but none of them work for me. For example, reset() would clear the fields but not remove them, removeData('bs.modal') does not do anything, .html('') deletes the form entirely and not just the fields. I am in need of a method to accomplish what I want, to have new form everytime and load the content each time fresh.
Also hello world here is just an example, actual form fields could be many. So I do not want to create a new form in a function but rather clear it and just load certain contents.
JS
function closeForm() {
$('#myform').removeData('bs.modal');
}
function loadForm() {
$('#myform')[0].reset();
var html = "<p>Hello world</p>";
$("#myform").append(html);
}
HTML
Open form
<div class="modal fade" id="myformDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button onclick="closeForm()" type="button" class="close right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="close">×</span>
</button>
</div>
<div class="modal-body">
<form id="myform">
</form>
</div>
</div>
</div>
</div>

Bootstrap modal provides the show and hidden events. You can clear your form on hidden and add content on show.
$('#myformDiv').on('show.bs.modal', function() {
var html = "<p>Hello world</p>";
$("#myform").append(html);
});
$('#myformDiv').on('hidden.bs.modal', function() {
$('#myform').empty();
console.log("modal closed and content cleared");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Code -->
Open form
<div class="modal fade" id="myformDiv" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="close">×</span>
</button>
</div>
<div class="modal-body">
<form id="myform">
</form>
</div>
</div>
</div>
</div>

an easy but not best way:
1- create a div tag contains all your form fields.give it an id (for example "myFields") and set style="display:none"
2- on modal load set $("#myform").html($("#myFields").html());

Don't load the modal if the the value is empty onload

I want to show modal only after form gets submitted.but It's loading at starting.
Here is my html code
<div class="container">
<!-- 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">Dear User</h4>
</div>
<div class="modal-body">
<p>Please note down your respective ID's</p>
<p id="ucid">Client ID:<s:property value="ucid"/></p>
<p>Broker ID:<s:property value="ubid"/></p>
<p>Developer ID:<s:property value="udid"/></p>
</div>
</div>
</div>
</div>
</div>
and here is Javascript
function myFunction(){
if ($('#ucid').val()=='') {
$("#myModal").modal("hide");
}else{
$('#myModal').modal('show');
}
though i tried above function to hide that.but its not working.please help me out.Thanks in advance

You should use .text() method to get value from p DOM element.
if ($('#ucid').text()=='') {
$("#myModal").modal("hide");
}else{
$('#myModal').modal('show');
}

Dynamically Load Bootstrap Modal Content and Open It Using Angular.js

I am trying to load modal content dynamically and open it when the user clicks a button. I have managed to dynamically load the content using ngInclude, but I cannot open it afterwards. My code:
<div class="modal-container" id="modal-container" ng-include="modal_template"></div>
and my controller.js
function set_modal_template(templateName, callback) {
$scope.modal_template = templateName;
callback();
}
$scope.load_modal_sms = function () {
set_modal_template("/static/partials/modal_template.html", function() {
$('#modal').modal('show');
});
};
and my modal_template.html:
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
What is happening is that the content of the modal_content.html loads perfectly, but the modal does not show up. If I click again, I only see the transparent black layer that is behind the modal, blacking out the screen, but not the modal itself.
Thanks!

You can solve this problem using a number of techniques. There are a few modules out there that provide modal service, including angular-ui, and I think these could solve your problems better (and more).
angular-modal-service
angular-modal-service is a module dedicated to creating modals. It allows providing either a template or a template service, and supports defining a scope for your modal (useful for abstraction).
Your sample code above would be
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
// Do not forget to include the module dependency: var myApp = angular.module('myApp', ['angularModalService']);
myApp.controller('MyController', ['ModalService', function (ModalService) {
$scope.load_modal_sms = function () {
var modal = ModalService.showModal({
templateUrl: "/static/partials/modal_template.html",
controller: function () { /* controller code */ }
}).then(function (modal) {
// Modal has been loaded...
modal.element.modal();
});
};
}]);
angular-ui-bootstrap
angular-ui-bootstrap (bower install angular-ui-bootstrap) has a $modal service that is extremely easy to use:
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
// Do not forget to include the module dependency: var myApp = angular.module('myApp', ['ui.bootstrap.modal']);
myApp.controller('MyController', ['$modal', function ($modal) {
$scope.load_modal_sms = function () {
var modal = $modal.open({
templateUrl: "/static/partials/modal_template.html",
scope: { /* custom scope */ }
});
};
}]);
Using your method
You may want to give angular some time to load and render the loaded template first before trying to .modal() it. If you haven't noticed, your callback is not doing anything special. You can as well run the code without any callback.
<div class="modal fade" id="modal" role="dialog" ng-if="detectLoaded()">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
function set_modal_template(templateName) {
$scope.modal_template = templateName;
}
$scope.load_modal_sms = function () {
set_modal_template("/static/partials/modal_template.html");
};
$scope.detectLoaded = function () {
// If this function is called, the template has been loaded...
setTimeout(function () { // Give some time for the template to be fully rendered
$('#modal').modal('show');
}, 10);
return true;
};
You can also remove the timeout by changing the position of the ng-if, or creating a stub element after the div. You can return false from the detectLoaded function to make the stub element not show. I have not tested this last option and don't know if it will work, you have to check.
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" modal-sm>
<div class="modal-content">
<div class="modal-header">
<h4>Pop-up head. Email</h4>
</div>
<div class="modal-body">
<h4>Pop-up body.</h4>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
<div ng-if="detectLoaded()"></div>
$scope.detectLoaded = function () {
$('#modal').modal('show');
return false;
};

how to hide parent location hash in url

Hello everyone I wanted to do is to switch form using single page (show/hide using javascript) but everytime i refreshd the page it will go back to the default form. Now i have a javascript code that will make the current form stays even if the users refresh the page it wont go back the the default form.
My problem is with my current script it makes a hash title in the url...how to make the hash hide without affecting the function of the script? or is there any other tricks in doing this in jquery/javascript? can anyone help me please?
script:
<script type="text/javascript">
$(function(){
$('.myFirst').hide();
$('.mySecond').hide();
$('.myThird').hide();
$('#show_first').click(function(){
parent.location.hash = 'first';
$('.myFirst').show();
$('.mySecond').hide();
$('.myThird').hide();
$('.modal').modal('hide');
return false;
});
$('#show_second').click(function(){
parent.location.hash = 'second';
$('.myFirst').hide();
$('.mySecond').show();
$('.myThird').hide();
$('.modal').modal('hide');
return false;
});
$('#show_third').click(function(){
parent.location.hash = 'third';
$('.myFirst').hide();
$('.mySecond').hide();
$('.myThird').show();
$('.modal').modal('hide');
return false;
});
$('#show_' + parent.location.hash.substr(1)).click();
});
</script>
modal link:
<a data-toggle="modal" data-target="#myModal"> Modal Dialog</a>
modal dialog code:
<div class="container">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="show_first" class="btn btn-info" data-dismiss="modal" aria-hidden="true">First</button>
<button type="button" id="show_second" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Second</button>
<button type="button" id="show_third" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Third</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
html code:
<div class="container">
<div class="myFirst">
<div class="row">
<center>
First Page
</center>
</div>
</div>
<div class="mySecond">
<div class="row">
<center>
Second Page
</center>
</div>
</div>
<div class="myThird">
<div class="row">
<center>
Third Page
</center>
</div>
</div>
</div>

You can store the id of the form in cookie and then after page refresh using the id put focus on the form using id of that form.

You can change url of page using HTML5 and pushState https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries

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