I use this (w3school) code to trigger the modal when clicking on the button
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
instead of using the button I want to use <a>'s onclick=function() method to trigger the modal. I already tried to exchange the *tn.onlclick-part, but that didnt work. How to accomplish this?
You can use a tag with preventDefault
const opener = document.querySelector('.btn');
opener.onclick = function(e) {
e.preventDefault(); // to prevent link's default behaviour
modal.style.display = "block";
}
<a class="btn" href="#">Open</a>
Include an anchor in your html and attach an event handler similar to the one for the button. You may add code to suppress the default behavior of clicking an anchor (ie. following the uri in the href attribute).
If you do not use the onclick attribute but assign handlers through the dom api with addEventListener, assert that the elements to attach the handlers to do exist. That's what the ready function attached to the window's load event is for.
let a
, btn
, modal
, span
;
// When the user clicks on the button, open the modal
function openModal(eve) {
if (eve.target.tagName.toLowerCase() === 'a') {
// Prevent standard link behavior
eve.preventDefault();
}
modal.style.display = "block";
} // openModal
// When the user clicks on <span> (x), close the modal
function closeModal(eve) {
modal.style.display = "none";
} // closeModal
function ready () {
modal = document.getElementById("myModal");
// Get the anchor that opens the modal
a = document.getElementById("myAnchor");
// Get the button that opens the modal
btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
span = document.getElementsByClassName("close")[0];
a.addEventListener ( 'click', openModal );
btn.addEventListener ( 'click', openModal );
span.addEventListener ( 'click', closeModal );
} // ready
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(eve) {
if (eve.target === modal) {
modal.style.display = "none";
}
};
window.addEventListener ( 'load', ready );
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- Trigger/Open The Modal -->
<a id="myAnchor" href="#">Open Modal here as well</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
Credits
CSS and HTML of the online snippet from the w3School page the OP has referenced.
Related
Hi I can't play video file in jsp from system location. But if i place video file(example.mp4) under web-content in and just use the video tag in jsp with fileName like below it will get play.
The below code didn't work
src="C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4"
when I use the below format I can play the video
src="video/example.mp4"; //video folder is under WEB-INF
Other problem is When the user clicks on (x) or clicks anywhere outside of the modal the modal closes ,But the video plays behind the modal invisibly.
how can i pause or close the video in background?
The complete code is below
video.jsp
<%#page import="java.util.ArrayList"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/modal.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/hover.css" media="screen" />
</head>
<body>
<h2>Video Popup</h2>
<!-- Trigger/Open The Modal -->
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="dcont" class="dropdown-content">
<%
String[] arr=new String[10];
arr[1]="C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4";
arr[2]="video/sample.mp4";
arr[3]="video/example.mp4";
%>
<a>
<%for(int i=1;i<4;i++){%>
<input id="myBtn<%=i%>" onclick="javascript:vidsub(this.id)" type="submit" value="<%=arr[i]%>">
<%}%>
</a>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<div class='modal-content'>
<!-- Modal content -->
<span class='close'>×</span>
<div id="mcont"></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function vidsub(clk) {
var btn = document.getElementById(clk);
var aval=btn.value;
var temp=JSON.stringify(aval);
document.getElementById("mcont").innerHTML =" <video autoplay id='vid' loop controls width='100%' height='100%'> <source src="+temp+" type='video/mp4'> <object data='js/video-js.swf' width='720' height='480'></object> </video>";
modal.style.display = "block";
};
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
x.pause();
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
modal.css
/*modal.css */
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: #666666; /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #666666;
margin: auto;
padding: 20px;
border:none;
width: 50%;
}
/* The Close Button */
.close {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #ff3399;
text-decoration: none;
cursor: pointer;
}
(1) Using local file as element source...
"The below code didn't work:
src="C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4""
Try using file since no http available on local disk:
src="file:///C:/Users/DMS/Documents/NetBeansProjects/VideoView/web/video/example.mp4"
(2) Remove video when modal is closed...
Your video is created by: .innerHTML method which dynamically creates a video> tag.
a) You could try making it blank (or empty):
document.getElementById("mcont").innerHTML ="";
b) You could try pausing the video element :
var myVid = document.getElementById("vid");
myVid.pause();
Example code:
(one makes a blank innerHTML and other is <video> pause, see which method works best for you):
//# When the user clicks on <span> (x), close the modal
span.onclick = function()
{
document.getElementById("mcont").innerHTML ="";
modal.style.display = "none";
x.pause();
}
//# When the user clicks anywhere outside of the modal, close it
window.onclick = function(event)
{
if (event.target == modal)
{
document.getElementById("vid").pause();
modal.style.display = "none";
}
}
I have jQuery code that removes the scrollbar while the popup modal is open. So, when I need to close popup, the scrollbar needs to appear again and the function works as intended except for one thing: if the user clicks elsewhere outside of the popup it will close, but the scrollbar remains hidden. It only works fully as intended when the close icon is clicked.
Is there any possibility to set auto overflow scrolling when the user clicks outside of the popup box? i.e. Not just on the close icon?
$(document).ready(function () {
$("button#mainbtn").click(function (){
$('body').css('overflow', 'hidden');
});
$(document).on('click', '.closer', function (){
$('body').css('overflow', 'auto');
});
});
<div id="myModal" class="modal" >
<div class="modal-content">
<div class="closer">×</div>
</div>
</div>
Code that opens modal box:
var modal = document.getElementById('myModal');
var btn = document.getElementById("mainbtn");
var span = document.getElementsByClassName("closer")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
css:
.modal {
display: none;
z-index: 100;
padding-top: 100px;
position:fixed;
top: 0;
width: 100%;
height: 100%;
}
.modal-content {
background-color: #f2f2f2;
margin: auto;
position:relative;
width: 60%;
height:90%;
transition: all 5s ease-in-out;
}
.closer {
top:0px;
right:20px;
color: #00284d;
position:absolute;
font-size: 45px;
}
As you have attached an event to close the modal, if they click outside of it you can set the overflow to auto just after you hide the modal.
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
$('body').css('overflow', 'auto');
}
}
you can make a $("html").click(function() and check if your popup is visible or hidden. The function is executed every time a click is made on the entire page
$("html").click(function() {
if($('.popup').is(":visible")){
alert("visible: dont show scroll")
}
else{
alert("hidden: show scroll")
}
});
$("button").click(function() {
$('.popup').toggle();
});
body{
background-color: blue;
height; 1000px;
width: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="popup">popup</div>
<button>toggle popup</button>
</body>
I've create a modal it works fine but when click outside it doesn't hide anymore. how can i do this? please help me anyone. thanks
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<button type="button" id="myBtn" class=" postsubmit-btn">Post</button>
<div id="myModal" class="modal">
<div class="modal-content ">
</div>
</div>
Please refer this code to close the modal on click outside the modal.
There is error in the span tag because span not available in your html code.
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
<button id="myBtn">Post</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h2>Modal</h2>
</div>
</div>
you can use stopPropagation() method to open and close model,
please have a look below updated code, hope this will help/resolved your issues.
<button type="button" id="myBtn" class=" postsubmit-btn">Post</button>
<div id="myModal" class="modal">
<div class="modal-content ">
</div>
<button class="close">Close</button>
</div>
<style>
.modal{width:300px; height:300px; background:#f5f5f5; display:none;}
.close{float:right}
</style>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function(event) {
event.stopPropagation();
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target != modal) {
modal.style.display = "none";
}
}
</script>
You can use Element.contains(event.target) to check if the click was on the element or one of its children. You can also use event.target!="myBtn" to make sure clicking on the button opens the modal.
.modal{
width: 50%;
height: 50%;
position: fixed;
top: 25%;
left: 25%;
border: 1px solid black;
background-color: dodgerblue;
}
<button type="button" id="myBtn" class=" postsubmit-btn">Post</button><button class="close">×</button>
<div id="myModal" class="modal" style="display: block;">
<div class="modal-content">
MODAL
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.id!="myBtn"&&!modal.contains(event.target)) {
modal.style.display = "none";
}
}
</script>
I tried to create a function to show and hide a div, to hide the div user can use close button or click outside the div, but the problem is the close function to hide the div if user click element outside the div run first before i the div is showed:
html:
$('#close-add').on('click', function() {
$("#add-shipping-modal").hide();
});
$('#new-shipping').on('click', function() {
$("#add-shipping-modal").show();
});
$('body').click(function(event) {
setTimeout(
if (!$(event.target).closest('#add-shipping-modal').length && !$(event.target).is('#add-shipping-modal')) {
if ($("#add-shipping-modal").css('display') != 'none') {
$("#add-shipping-modal").hide();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new-shipping'">Open Div</button>
<div id="add-shipping-modal" style="display:none">
<button id="close-add">Close Div</button>
<p> Show Me </p>
</div>
when i click the #new-shipping button, the hidden div won't show up, i guess it's because when i click the #new-shipping button, it shows the div first and then trigger the body click function
There is already a solution provided at W3Schools.
Check Here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
Snippet
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
You have added ' extra in your code after new-shipping
<button id="new-shipping'">Open Div</button>
should be
<button id="new-shipping">Open Div</button>
https://jsfiddle.net/bntnfhLm/
Also please change the body click function by using preventdefault/stopPropagation
$("#add-shipping-modal").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$("#add-shipping-modal").hide();
});
try this
$('#new-shipping').on('click', function () {
$("#add-shipping-modal").show();
return false;
});
$(document).click(function (event) {
$("#add-shipping-modal").hide();
});
try this
$('#close-add').on('click', function () {
$("#add-shipping-modal").hide();
});
$('#new-shipping').on('click', function () {
$("#add-shipping-modal").show();
return false;
});
$("#add-shipping-modal").click(function () { return false; });
$(document).click(function (event) {
$("#add-shipping-modal").hide();
});
I want to display my reference works on index. I limited the words. My aim is this: User who wants to learn detail information about post, will click the post thumbnail and the rest of content will open with popup.
I used w3css modal to make it. My javascript codes are:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
But only the first post seems like that. The others have no reaction.
Thanks.
I want to make all thumbnails like that
I made some revision about that. I used fancybox 2 and change my code with this
<?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?>
<div id="inline1" style="width:400px;display: none;">
<?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?><?php the_content(); ?>
</div>
Now all the thumbnails open with fancybox but this time the other thumbnails' contents are same with the first post.
I don't think create a modal element in every container is a right way to go.
Instead, I will suggest you make only one modal element, and change the content of
that modal when any image got clicked.
thus, here is a demo that I just made
JSbin
The step will be
find out all container elems
bind those elems with click event
when user click one elem, extract the text and image src of that elem
inject into modal-body
removve hide class
It's fine to have modals mixed in. You have to be a little picky about event handlers and which one to close, but it's not too bad.
var sites = document.querySelectorAll('.site');
var closes = document.querySelectorAll('.close');
var ix;
for (ix = 0; ix < sites.length; ix++) {
sites.item(ix).addEventListener('click', showModal);
}
for (ix = 0; ix < closes.length; ix++) {
closes.item(ix).addEventListener('click', closeModal);
}
function showModal(e) {
e.stopPropagation();
this.querySelector('.modal').style.display = "block";
}
function closeModal(e) {
e.stopPropagation();
try {
getParent(this, 'modal').style.display = "none";
} catch (e) {
console.warn('Failed to find my daddy.');
}
}
function getParent(el, cls) {
while (el.parentElement) {
el = el.parentElement;
if (el.classList.contains(cls)) return el;
}
return null;
}
.site {
display: inline-block;
}
.thumbnail {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
line-height: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<div class="site">
<div class="thumbnail"></div>
<div class="modal">
<div class="modal-content">
<span class="close">×</span> First Item
</div>
</div>
</div>
<div class="site">
<div class="thumbnail"></div>
<div class="modal">
<div class="modal-content">
<span class="close">×</span> Second Item
</div>
</div>
</div>
</div>