I have a problem with JS. I mean when user click on the image, modal opens, I must use a href. I don't know how to make that working. I have only modal. I show you my code:
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[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";
}
}
.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;
}
<article class="item">
<img src="http://i.imgur.com/RRUe0Mo.png" id="myBtn" alt="" />
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>TEST</p>
</div>
</div>
</article>
Thank you for all your help!
I'm having a hard time to understand what you want to accomplish, but I guess you look for something like this:
<img src="images/film/min_1.png" id="myBtn" alt="" />
I don't know if this is what you're looking for, but I got it working by setting the href to '#' (see jsFiddle demo)
<img src="images/film/min_1.png" id="myBtn" alt="" />
btn.onclick = function() {
modal.style.display = "none";
}
On image click you are showing modal, change it to none, and you can navigate to your given url in href
I know that the question was posted years ago but I struggled to find proper answer for a while. Actually, you can make this:
<a href="#" data-toggle="modal" data-target="your-modal-id" class="image fit">
<img src="" id="" alt="" />
</a>
Hope someone will find it helpful)
Related
We have opened an iframe in model dialog. In the iframe we are loading a document. The document is also and html page. The <a> tags in the document are not navigating to the id mentioned in their href.
Just a sample from the html document.
Below is the <a> example,
<a data-custom-class="link" href="#infoshare">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</a>
<p id="infoshare" style="font-size:15px;">
<span style="color: rgb(0, 0, 0);">
<strong>
<span style="font-size: 19px;">
<span data-custom-class="heading_1">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</span>
</span>
</strong>
</span>
</p>
Onclick of the <a> it should navigate to the <p>.
Though, It works perfectly when the url is browsed in the browser.
But Doesn't work in the dialog model.
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("infoshare");
// 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";
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<a data-custom-class="link" id="infoshare">
2. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
</a>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
I have a modal with a image here. However, now I want to add another image inside the modal, and have previous/next button to switch between two images. I tried adding a src there, but I was not able to add previous/next funtion. How do I do that? 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";
}
}
/* 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: 40%;
}
/* 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;
}
`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<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" style="width:740px">
<span class="close">×</span>
<div align="center"><img src="https://en.wikipedia.org/wiki/Elephant#/media/File:African_Bush_Elephant.jpg" width="700" height="560"></div>
<div align="center"><img src="https://en.wikipedia.org/wiki/Elephant#/media/File:Aardvark2_(PSF)_colourised.png" width="700" height="560"></div>
</div>
</div>
</body>
</html>
Demo's can be find at: [1]https://jsfiddle.net/tinywhui/a5uLgsrp/
Add them inside the modal as absolute positioned elements.
<!-- Modal content -->
<div class="modal-content" style="width:740px">
<span class="close">×</span>
<img src="left-arrow.svg" />
<img src="right-arrow.svg" />
<div align="center"><img src="https://en.wikipedia.org/wiki/Elephant#/media/File:African_Bush_Elephant.jpg" width="700" height="560"></div>
<div align="center"><img src="https://en.wikipedia.org/wiki/Elephant#/media/File:Aardvark2_(PSF)_colourised.png" width="700" height="560"></div>
</div>
Then, in your javascript, target these elements and add onclick functions that hide or show the images within the modal.
I am making a personal portfolio website for myself.
<footer>
<ul class="icons">
<li>GitHub</li>
<li>Resume</li>
<li> Contact</li>
</ul>
</footer>
In the code that is above, would it be possible to include a modal for the contact button? I have created a "contact.html" page and would like it to pop-up when the button is clicked rather than have a whole new page open up.
Or would I have to use the button tag instead of the tag?
I am comfortable with using Bootstrap and can implement a modal with that framework if necessary.
You can Use this custom modal or bootstrap modal https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
// 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";
}
}
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 {
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 can use this model:
<html>
<head>
<title>
modal
</title>
<style>
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 {
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;
}
</style>
</head>
<body>
<ul class="icons">
<li>GitHub</li>
<li>Resume</li>
<li> Contact</li>
</ul>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var contact = document.getElementById("contact");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
contact.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";
}
}
</script>
</body>
I want to create a modal box. It should appear, when a user clicks a button, and close, when the user clicks a close button in the modal box.
I made two functions:
check() : it change css. After it's elememt onclick, appears modal box
close() : this function should close modal box, but it doesm't. It simply should set previous css setting. This function isn't execution at all when I click a close button(span element).
Why close function doesn't work and what I should modernize to get a result?
Thanks in advance)
function check() {
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
//this function dont't work
function close(){
var modal = document.getElementById("myModal");
modal.style.display = "none";
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
<html>
<body>
<button id="button" type="submit" onclick="check()">Login</button>
<div id="myModal" class="modal">
<div class="modal-content" >
<span class="close" onclick="close()">×</span>
<p >Some text in the Modal..</p>
</div>
</div>
</body>
</html>
close is already the name of a native browser function, window.close(). Rename your function and it works fine:
function check() {
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
function closeModal(){
var modal = document.getElementById("myModal");
modal.style.display = "none";
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
<html>
<body>
<button id="button" type="submit" onclick="check()">Login</button>
<div id="myModal" class="modal">
<div class="modal-content" >
<span class="close" onclick="closeModal()">×</span>
<p >Some text in the Modal..</p>
</div>
</div>
</body>
</html>
I've created a modal box which works fine, but when I apply that to other elements it just works on the first one.
These elements are different images that when you click open a modal box with different information in each one
This is the url
It will really appreciate if you anyone can help me out with this.
Thanks,
This is the HTML:
<div id="myBtn">
<div class="container-team">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/image-normal.jpg" class="image-person">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/image-hover.jpg" class="overlay-person">
<div class="centered">Jack Denton</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<aside>
<div class="photo-person-modal-box">
<img src="https://i.stack.imgur.com/7UL6j.jpg">
</div>
<div class="connect-modal-box">
<div class="social-icon-modal-box">
<div class="container-social-icon">
</div>
<div class="container-social-icon">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/phone-white.png" width="40px" height="40px" class="icon-normal">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/phone-white-hover-f.png" width="40px" height="40px" class="icon-hover">
</div>
<div class="container-social-icon">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/linkedin-white.png" width="40px" height="40px" class="icon-normal">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/linkedin-white-hover-f.png" width="40px" height="40px" class="icon-hover">
</div>
<div class="container-social-icon">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/twitter-white.png" width="40px" height="40px" class="icon-normal">
<img src="http://allaboutgroup.isabelsaez.co.uk/wp-content/uploads/2017/09/twitter-white-hover-f.png" width="40px" height="40px" class="icon-hover">
</div>
</div>
</div>
</aside>
<div class="description-modal-box">
<header class="header-modal-box">
<div class="name-modal-box">
<strong>JACK DENTON</strong>
</div>
<div class="role-modal-box"> CO-FOUNDER</div>
</header>
<div class="content-modal-box">
<div class="quote-modal-box">The big dog, the raconteur, the linguaphile.
</div>
<div class="question-modal-box">Worst job after graduating?</div>
<div class="text-modal-box">Working on a chicken farm. Have you seen Napoleon Dynamite? It’s like that but worse. Dead chickens in bins a metre from where I was working, stifling heat and constant attacks from angry cockerels. It was alright, though, because they were paying me £3 an hour.
</div>
</div>
</div>
</div>
</div>
This is the JavaScript:
<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 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";
}
}
</script>
This is the CSS:
/*__________________MODALBOX__________*/
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 4; /* 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(3,134,221,0.30); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #ffffff;
margin: 15% auto; /* 15% from the top and centered */
padding: 0px;
width: 70%; /* Could be more or less, depending on screen size */
height: 28.75rem;
}
/* The Close Button */
.close {
color: #ffffff;
float: right;
font-size: 50px;
font-weight: bold;
height: 60px;
width: 60px;
position: relative;
background-color: #019ee3;
border-radius: 50%;
box-shadow: rgba(35,35,35,0.2) -1px 1px 8px ;
padding: 15px 15px;
text-decoration: none;
margin: -20px -20px 20px;
transition: all 1s ease-in-out 0s;
}
.close:hover, .close:focus {
text-decoration: none;
cursor: pointer;
transform: rotate(360deg);
transition: all 1s ease-in-out 0s;
}
I think you need to use myBtn like a Class
<div class="myBtn">
...