Develop Reference

How to popup modal on page load

I'm learning on how to popup modal when a page load. For example when I click on a button in home.html that is linked to comment.html, when comment.html load then modal popup. But if I navigate to comment.html without clicking on the button then modal will not popup. Let modal only popup when I click on the button.
home.html
<!-- Another button that linked to comment without mod data-target -->
# I do not want Modal to popup in comment.html when I click on this button
Comment
<!-- Button trigger modal -->
# I want modal to popup in comment.html when I click on this button
<a href="{% url 'site:comment' %}" data-toggle="modal" data-target="#basicExampleModal">
Launch Modal in Comment
</a>
comment.html
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"aria-hidden="true">
<div class="modal-dialog" role="document">
<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>

$(document).ready(function(){
if(localStorage.getItem('popState') != 'shown'){
$("#basicExampleModal").delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$('#basicExampleModal').modal('show');
});
The above code will create a popup Model automatically! Hope you find it useful.

In short:
create a local storage data item (for example item name being: showModalInCommentPage) before navigating to the comments page
on loading comments page check if that local storage data item (showModalInCommentPage) exists
if exists load the modal and remove the local storage data item (showModalInCommentPage)
in home templates file
<!-- If modal should not be shown -->
Comment
<!-- If modal should be shown : create local storage item on clicking the a tag -->
Launch Modal in Comment
in comments template file
<script>
$(document).ready( function() {
var showmodal = localStorage.getItem('showModalInCommentPage');
if (showmodal == '1') {
$('#basicExampleModal').modal('show');
localStorage.removeItem('showModalInCommentPage');
}
});
</script>

How to activate Bootstrap 4 modal by clicking a button in the first page, that redirects you to a second page with modal activated?

For my project, I want to implement a modal. I am using Bootstrap 4. The modal should work as following:
When I press the button in the first .html page, the button should redirect me to a second .html page, meanwhile open a modal in that second .html page as a welcoming.
So the modal in that case is like a welcoming message as a popup box.
To make things clear. The button "code" is in the first .html file, the modal "code" is in the second .html file.
Button:
<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
data-toggle="modal" data-target="#modalLogin">Prijavi se</button></a>
Modal:
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoginLabel">Pozdravljeni!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Dobrodošli v digitalnem gradbenem delovnem listu.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Nadaljuj</button>
</div>
</div>
</div>
</div>
I tried everything. from id's, to trying to relocate the code, to trying to find another solution, with JavaScript, but no luck so far.

A click on your <a> cannot open a modal in another page that is about to be opened. Instead, what you do is you slightly modify the href of your <a>, for example: .
Then, in your JS (that is being loaded with index.html) you can check if there is a 'welcome' in your URL when the user navigates to the page. If there is, you trigger the modal to show. It would look something like this:
$(document).ready(function() {
if (window.location.href.indexOf("welcome") > -1) {
$("#modalLogin").modal("show");
}
});
This way, when the user navigates to index.html the modal doesn't show, but if the user clicks on your button, the modal will be displayed because the URL will contain welcome.

How to open a bootstrap modal from antoher page html?

I have already finished the code on the page by the way mysite.ru / jqueryform-75cb32 / form.html
How to make it open in the modal window at mysite.ru/report.html on the button
<a class="btn btn-info btn-sm pull-right act_popup_dota" data-toggle="modal" data-target="#modal_dota2">
     Leave a vacancy
</a>
https://pastebin.com/5z0y8yBg

$('#modal_dota2').on('shown.bs.modal',function(){ //correct here use 'shown.bs.modal' event which comes in bootstrap3
$(this).find('iframe').attr('src','http://mysite.ru/jqueryform-75cb32/form.htm');
})

Bootstrap momentarily displays hidden modal dialog on slow page loads

I'm using Bootstrap 2.3.2 via the bootstrap-sass-2.3.2.2 gem in a Rails app.
With the following HTML:
<div class="modal hide fade fullscreen" id="myModal" aria-hidden="true">
<div class="modal-header">
<h3></h3>
</div>
<div class="modal-body">
<img src="">
</div>
<div class="modal-footer">
<a class="figureFullsizeLink btn" href="">Full-size</a>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
And links like these:
<a href="#myModal" class="btn" data-toggle="modal" data-html="true">
<img alt="Fig 1" class="figure" src="http://s3.amazonaws.com/..." title="..." />
</a>
And the following javascript:
$(document).ready(function() {
...
// hide the modal window onload
$("#myModal").css("display", "none");
...
});
I get a momentary flash of the open modal dialog while the page is loading. (see https://www.youtube.com/watch?v=X-HwRpKAUh8 for an exampe).

Your jQuery code runs after the DOM hierarchy has been fully constructed. Therefore the modal will be displayed when the DOM loads, and then the javascript will execute and hide the modal.
The easiest way to have the modal hidden by default is to set the CSS to:
#myModal{display:none};
Or, you can always place your jquery code within the
<head>
element of your page and it will execute before the DOM is constructed.

Jquery close modal issue

Ok so i have a modal in bootstrap that has the class of show, to have it display on page load. So it has a ender button at the bottom but couldnt get it to close on click
So I now have script that closes if clicks any where on the box but really it only on that button
JS
<script>
$('.modal').click(function() {
$(this).removeClass('show');
$(this).addClass('hide');
});
</script>
Modal box classes
<div class="modal show"></div>
Button
<button type="button" class="btn btn-primary center-block click" style="font-size: 20px;" onClick='changeClass'">ENTER</button>
Any help would be great!

This doesn't work that way.
You only have to $('.modal .close').modal("hide");
.close being the class for your close button.
Or you can add attribute data-dismiss="modal" to close button.
Ref: http://getbootstrap.com/javascript/#modals-methods

If you are using bootstrap you can do this to close and show a modal:
$('.modal').modal('toggle');
Check out the documentation here.
Also note that bootstrap has an out of the box close button (which you need to include inside your modal) to handle this behavior:
<button type="button" class="close" data-dismiss="modal">x</button>