I'm trying to show a bootstrap modal when the page loads (only 1 time) and set a cookie for 7 days. But something prevents the modal to show up. If I don't use the jquery-cookie the modal turns up. What am I doing wrong?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '7');
}
});
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
test
</div>
</div>
</div>
Adding alert($.cookie('pop')); doesn't do anything different. Still no popup or other message.
Related
I have a simple question about Bootstrap 4 with simple trick
I want to show a Loading indicator such as Twitter in Every time the user opens the modal.
I make some codes and it works well but I lost some pieces ....
Button HTML Codes :
Click here
Modal HTML Codes
<div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Preloader -->
<div id="modal-preloader">
<div class="modal-preloader_status">
<div class="modal-preloader_spinner">
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status"></div>
</div>
</div>
</div>
</div>
<!-- End Preloader -->
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Jquery Codes
$('#example_Modal').on('shown.bs.modal', function () {
$("#modal-preloader").delay(5000).fadeOut(100);
});
as you can see here it work well but I want the Loading indicator spinner show eveytime when the user close the modal and open it again I think I explain well what I Want... thank you
You can achieve that by defining handler when modal closes. Please run the working code snippet below.
$('#example_Modal').on('shown.bs.modal', function () {
$("#modal-preloader").delay(5000).fadeOut(100);
});
// reset loading display when modal is closed
$('#example_Modal').on('hidden.bs.modal', function (e) {
$("#modal-preloader").show();
})
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
Click here
<div class="modal fade" id="example_Modal" tabindex="-1" role="dialog" aria-labelledby="example_ModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Preloader -->
<div id="modal-preloader">
<div class="modal-preloader_status">
<div class="modal-preloader_spinner">
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status"></div>
</div>
</div>
</div>
</div>
<!-- End Preloader -->
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
There is also other way to achieve that by simply modifying the shown.bs.modal handle like this:
$('#example_Modal').on('shown.bs.modal', function () {
$("#modal-preloader").show().delay(5000).fadeOut(100);
});
but it appears glitchy when you re-open the modal. So i recommend using hidden.bs.modal to reset the loading section display inside the modal.
I hope this answers your question.
HTML :
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
and
<input type="button" class="btn btn-success" id="submit2" value="Finish Recording">
What I am aiming to do is when the button is clicked, it redirects to another page, and when the redirected page is loaded, the modal should appear in the new page.
I know I can do all of this easily with multiple buttons but that's not what I'm looking for, I have even tried a sleep function which didn't work.
JS :
$('#submit2').on('click', function (e) {
location.href = "bot.net";
$('#myModal2').modal('show');
});
Any idea how to do this?
Make the modal on the page you want to display
<div class="container">
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
From the first page where the form submission is happening
JS :
$('#myForm').on('click', function (e) {
location.href = "bot.net?showModel=1";
});
On the bot.net page on document ready check for the GET element and store it in another variable
$(document).ready(function(){
if(showModel == 1){
$('#myModal2').modal('show');
}
})
Bootstrap Modal does not load after page has been refreshed certain times.
After that, the modal will only show up when I open the page in incognito.
Does anyone have any fix for this bug?
You can go to the actual site to see for yourself: http://www.petalandco.com.au/
js:
jQuery(window).load(function(){
setTimeout(function(){
var hiddenmodal = getCookie('hiddenmodal');
if (hiddenmodal == "") {
jQuery('#popupNewsletterModal').modal('show');
}
}, 100);
HTML:
<!-- Modal -->
<div class="modal fade" id="popupNewsletterModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document" style="width:679px;height:439px;">
<div class="modal-content" style="<?php echo ($style);?>">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background: rgba(0,0,0,0);top:0px;">
<span aria-hidden="true" style="color:#000;font-size:40px;">×</span>
</button>
<div class="modal-body">
<div class="widget popupnewsletter-widget heading__center">
In rails 4, I am using bootstrap plugin. When I am using modal feature there is close event issue which I need to solve. When modal opens, it should get close when I click on 'x' icon or 'Esc' button otherwise it should be open always. Right now when I click on the screen which excludes the modal form area it will get close.
In main.erb,
<div class="modal fade" id="main-lightbox-container" tabindex="-1" role="dialog" aria-labelledby="main-lightbox-container" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
In form.js.erb,
var content = "<%= escape_javascript(render(:partial=>"form", :locals=>{:user=>#user})) %>";
var container = $('#main-lightbox-container');
container.find('.modal-content').html(content);
container.modal({});
Here I am loading modal form via ajax request. How can I fix this on-screen click issue? Please help me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
<div data-toggle="modal" data-target="#modalid">Open</div>
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body" style="background-color: #F0F0F0">
Content
</div>
</div>
</div>
<div id="myModal" data-keyboard="false" data-backdrop="static">
just add data-keyboard="False" and data-backdrop="static" it works for me.
I am trying to .load() a bootstrap modal in my page and show it immediately. Below is the code I have written (which isn't working as the modal opens but can then never be closed)!
Basically I am trying to .load() a list of players in a modal when you click on a team name (with the class .team), I've tried various ways of calling $($this).empty() with no success.
Here is my function:
$(function () {
$('.team').on('click', function () {
var target = $(this).data('target');
$('#results-modals').load('/team-players.html ' + target, function (response, status, xhr) {
if (status === "success") {
$(target).modal({ show: true });
}
});
});
});
Here is the html anchor and example modal:
<a class='team' data-toggle='modal' data-target='#20'>Real Madrid</a>
Data held in external file team-players.html:
<div id='20' class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<p>Player 1: Ronaldo</p>
</div>
</div>
</div>
$(function(){
var url = "url of the modal window content";
$('.my-modal-cont').load(url,function(result){
$('#myModal').modal({show:true});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Modal Window Container -->
<div class="my-modal-base">
<div class="my-modal-cont"></div>
</div>
<!-- Modal Window content -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Instead of $($this).modal({ show: true }); try $(this).modal('show');
To hide the modal, you can use $(this).modal('hide');
You can do $(this).modal("toggle") if it open it will close and vice versa.
jQuery .load() bootstrap modal and show
for show $(#ID).modal('show');
for hide $(#ID).modal('hide');