Im trying to load a modal after a 3 second page load delay
The code below opens the modal however i cannot close it and the grey overlay is on top of the content etc
Code below
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$('#myModal').modal();
}, 3000);
});
</script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Join IQ Option Today</h4>
</div>
<div class="modal-body text-center">
<a target="_blank" href="mylink"><img src="myimage.jpg" width="300" height="600" /></a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Fixed!
My css contained z-index:1
I've commented that out and it now works perfectly!
Related
Working on bootstrap modal here i'm trying to add modal inside another modal in html as well. Is there a way using jquery target current current modal only.
<div class="modal fade role=" dialog ">
<div class="modal-dialog modal-dialog-centered ">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header ">
<button type="button " class="close " data-dismiss="modal " aria-label="Close ">
<svg class="icon-utility-close ">
<use xlink:href="#close-modal-icon "></use>
</svg>
</button>
</div>
<div class="modal-body justify-content-center ">
<p>Text 1</p>
</div>
</div>
</div>
<div class="modal fade role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<svg class="icon-utility-close">
<use xlink:href="#close-modal-icon"></use>
</svg>
</button>
</div>
<div class="modal-body justify-content-center">
<p>Text 2</p>
</div>
</div>
</div>
</div>
</div>
I was try to add different id to the close button and hide modal but it is not working. Can anyone point me in the right direction how to achieve.
i need that bootstrap modal to be shown on page by loading the page and i found the following code. but there are two issue:
1- i want that modal to be shown for 3 times for every user, not just for first time! how can i solve that, my friends?
2- i need to show that modal on many specific pages. how can i control that?
my JS codes:
// A $( document ).ready() block.
$( document ).ready(function() {
if (document.cookie.indexOf('visited=true') == -1){
// load the overlay
$('#myModal').modal({show:true});
var year = 1000*60*60*24*365;
var expires = new Date((new Date()).valueOf() + year);
document.cookie = "visited=true;expires=" + expires.toUTCString();
}
});
my HTML codes:
<!-- Modal -->
<div id="myModal" 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" style="text-align: center;" >Download on app store</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12"><img src="" class="img-responsive" /></div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-2"><img src="" class="img-responsive" /></div>
<div class="col-xs-4"><img src="" class="img-responsive" /></div>
</div>
</div>
<!--<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>-->
</div>
</div>
</div>
beforehan, thanks for helping
note: i am not familiar with java script and jQuery. would you make my codes correctly in the answer?
You can do something like below.
// A $( document ).ready() block.
$( document ).ready(function() {
var count = 0;
/*if(localStorage.getItem("modal_count") === null) {
} else {
count = localStorage.getItem("modal_count");
}*/
count = count+1;
//if(count <= 3) {
$('#myModal').modal('show');
// localStorage.setItem("modal_count", count);
//}
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="open_modal"> sample button</button>
</body>
</html>
<!-- Modal -->
<div id="myModal" 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" style="text-align: center;" >Download on app store</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12"><img src="" class="img-responsive" /></div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-2"><img src="" class="img-responsive" /></div>
<div class="col-xs-4"><img src="" class="img-responsive" /></div>
</div>
</div>
<!--<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>-->
</div>
</div>
</div>
After several months, I Found the answer myself. so please check my new question:
how to set cookie after 10 seconds by javascript
.
In my answer (that question), you can see the solution of this qustion.
Thanks
So, I am working on a <canvas> game which is created and presented inside a bootstrap modal. I am trying to write a javascript function that will be called on gameOver that will present a new (stacked) modal on top of my canvas with 3 buttons for score submission/registration/replay.
I present my first modal by data-toggle inside my html and works fine, but when I try to present my second modal on top (by javascript) it appears to be reported as not defined.
Here is my code: JSFiddle .
(in this case I call my second modal in my canvas draw method as an example, but I have also tried a separate button, other event listeners etc. The problem is always the same) .
If there is a better way to present that Game Over screen with buttons I'm open to suggestions. I want to avoid drawing any buttons in my canvas though and getting coordinates to read clicks on it.
Thanks in advance.
You have to adjust z-index if you want to open modal on top of another modal. Using the provided solution here Multiple modals overlay, you could do something like this.
$(document).ready(function() {
let canvas = null;
let drawCanvas = () => {
canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(0, 0, 630, 850);
};
$('#openBtn').click(function() {
$('#myModal').modal({
show: true
});
if (!canvas) {
drawCanvas();
}
setTimeout(function() {
$('#myModal2').modal({
show: true,
});
}, 2000)
});
$(document).on('show.bs.modal', '.modal', function(event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>Stacked Bootstrap Modal Example.</h2>
<a id="openBtn" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal 1</h4>
</div>
<div class="modal-body">
<canvas id="myCanvas" width="630" height="850">
</canvas>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade rotate" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal 2</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<p>come content</p>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal 3</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal4">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal 4</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.</div>
<div class="modal-footer"> Close
Save changes
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I have come across one issue for getting an embedded link in modal box so that embed code can be shared to any one to use in their websites.
I have tried to some extent to get the popup when I click a button and open the embed link content in the popup.
But the lines to be shared to the user will be more. So, looking for simple way to acheive it.
`<div class="container">
<h2>Click on the link below</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Reserve Table</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<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">
<embed width="800" height="685" src="http://find-out-pro.co/pcktnight/projet1/reservations_website.html?member_id=56&langs=all&place=101" frameborder="0" allowfullscreen="true">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>`
You could try using <iframe> instead of embed
I've made a JSFiddle to show you:
<div class="modal-body">
<iframe id="videoContainer" width="800" height="685" src="http://find-out-pro.co/pcktnight/projet1/reservations_website.html?member_id=56&langs=all&place=101" frameborder="0" allowfullscreen></iframe>
</div>
JSFIDDLE EXAMPLE
I have a gallery inside my modal window done via Bootstrap.
I want to be able to horizontally scroll within it using this: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/.
The problem is, it scrolls the page behind it, not the actual modal window. When I don't have the Horizontal Scrolling script on, I can scroll in the modal with shift+mousewheel, which is what I want to do width the script(just without using shift ofcourse).
My JSFiddle: http://jsfiddle.net/8XdVt/22/
HTML:
<head>
<script type="text/javascript" src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<h2>Modal Gallery</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="gallery-modal">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<h2>Normal Gallery</h2>
<div id="gallery">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
</div>
</body>
Okay, made it work! All I did was change the scrolling script, so it doesn't scroll in html and body, but on .modal, which is the main class of the modal window!
Updated JSFiddle: http://jsfiddle.net/8XdVt/28/.
Changed
$("html,body").mousewheel(function(event, delta)
To
$(".modal").mousewheel(function(event, delta)