I'm trying to use draggable() within modal.
it works perfectly outside of modal but doesn't work when I use it in modal.
Would you tell me what is the problem and how to fix this?
here is my full code.
(I just included all CSS and script. Didn't know how to post them separately. 2017.06.14)
Thank you.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
#CHARSET "UTF-8";
element.style {
width: 200px;
display: block;
top: 5442px;
left: 629px;
}
.design-dropdown {
position: absolute;
left: -9999px;
top: -9999px;
padding: 5px 0;
background: white;
border: 1px solid #D7D7D7;
border-radius: 5px;
-webkit-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.3);
z-index: 10000;
}
.design-dropdown .divider {
border-top: 1px solid #ddd;
margin: 0px;
padding: 0px;
line-height: 1;
cursor: default;
height: 0px;
}
.design-dropdown li {
position: relative;
margin: 5px;
padding: 5px;
font-size: 15px;
color: #000;
cursor: pointer;
display: block;
overflow: hidden;
}
.design-dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
.design-dropdown li:hover {
background-color: #DEF;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 1000px;
height: 850px;
margin-bottom: 220px
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
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-right:2%;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
*{
box-sizing: border-box;
}
/* The Modal (background) */
.modal-header {
position: relative;
font-size: 16px;
padding: 16px 20px 15px;
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #00B8FF;
left: 0;
right: 0;
width: 100%;
margin: auto;
float: right;
}
/* Modal Body */
.modal-body {
width:100%;
height:90%;
padding: 40px 30px 20px 30px;
}
.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 */
}
</style>
</head>
<body>
<!-- mouse left click window -->
<div class="grid_context_menu design-dropdown" id="grid_context_menu" style="width: 200px; display: block; top: 5467px; left: 653px;">
<ul class="custom-menu">
<li id="_setting" class="_setting"><span class="txt">imagemap seeting</span></li>
</ul>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header" align="center">
<span class="close">×</span>
<h3>video setting</h3>
</div>
<div class="modal-body" id="body" >
<div id="draggable" class="ui-widget-content">
<p >Drag me around</p>
</div>
</div>
</div>
</div>
<script>
//get dropdown on mouse right-click
$(document).ready(function(){
$(document).bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".grid_context_menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.clientY + "px",
left: event.clientX + "px"
});
$(".custom-menu li").click(function(e){
// This is the triggered action name
switch($(this).attr("class")) {
case "_setting":
$(".modal").show();
$(".grid_context_menu").hide(100);
$(".close").click(function(){
$(document).on("contextmenu dragstart selectstart",function(e){
return true;
});
$(document).bind("contextmenu");
$(".modal").hide(100); })
$(".modal").unbind("contextmenu");
$(".modal").on("contextmenu dragstart selectstart",function(e){
return false;
});
break;
case "_extend": alert("second"); break;
case "_copy": alert("third"); break;
}
});
});
});
$( function() {
$( "#draggable" ).draggable();
} );
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("_setting");
// 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";
}
}
</script>
</body>
</html>
First try initial draggable item then do what you want to do. it s working now. Try this code.
https://jsfiddle.net/0orxxkvf/
$("#draggable").draggable();
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("_setting");
// 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";
}
}
Related
What I want
I have a page that you use to shop for cards and I do not want to create like 100 pages for different products so I just want a popup for each tile. But when I assign my id to javascript then I create another rid and just put a comma then that id name after there is no response.
My question is
How do I apply the same javascript to different buttons with the same effect But with different content with minimum code?
My code so far
// Get the modal
var modal = document.getElementById("myModalz");
// Get the button that opens the modal
var btn = document.getElementById("myBtnz");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closez")[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";
}
}
#import url("https://fonts.googleapis.com/css2?family=Istok+Web:wght#400;700&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Istok Web", sans-serif;
}
.card {
margin: 0.5%;
display: inline-block;
position: relative;
width: 320px;
height: 480px;
background: #191919;
border-radius: 20px;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #ffce00;
transform: skewY(345deg);
transition: 0.5s;
}
.card:hover::before {
top: -70%;
transform: skewY(390deg);
}
.card::after {
content: "CORSAIR";
position: absolute;
bottom: 0;
left: 0;
font-weight: 600;
font-size: 6em;
color: rgba(0, 0, 0, 0.1);
}
.card .imgBox {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
z-index: 1;
}
.card .imgBox img {
max-width: 100%;
transition: .5s;
}
.card:hover .imgBox img {
max-width: 50%;
}
.card .contentBox {
position: relative;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
}
.card .contentBox h3 {
font-size: 18px;
color: white;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.card .contentBox .price {
font-size: 24px;
color: white;
font-weight: 700;
letter-spacing: 1px;
}
.card .contentBox .buy {
position: relative;
top: 100px;
opacity: 0;
padding: 10px 30px;
margin-top: 15px;
color: #000000;
text-decoration: none;
background-color: #ffce00;
border-radius: 30px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.5s;
}
.card:hover .contentBox .buy {
top: 0;
opacity: 1;
}
.mouse {
height: 300px;
width: auto;
}
/* The Modal (background) */
.modalz {
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 */
.modalz-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.closez {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.closez:hover,
.closez:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!--zero-->
<div class="card">
<div class="imgBox">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.redd.it%2Fw8f8iuj68tn61.jpg&f=1&nofb=1" alt="Backrooms Pack" class="mouse">
</div>
<div class="contentBox">
<h3>Backrooms Pack</h3>
<h2 class="price">4.<small>99</small> $</h2>
Buy Now
</div>
</div>
<!-- The Modal -->
<div id="myModalz" class="modalz">
<!-- Modal content -->
<div class="modalz-content">
<span class="closez">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!--one-->
<div class="card">
<div class="imgBox">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.y50mqCTtnDQNTZL3prMvUgHaJb%26pid%3DApi&f=1" alt="War Pack" class="mouse">
</div>
<div class="contentBox">
<h3>War Pack</h3>
<h2 class="price">4.<small>99</small> $</h2>
Buy Now
</div>
</div>
<!-- The Modal -->
<div id="myModalz" class="modalz">
<!-- Modal content -->
<div class="modalz-content">
<span class="closez">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
document.getElementsByClassName("buy") will return a collection of the anchor tags with the class 'buy' that you can then loop over and apply the binding to that event.
Alternatively you could use a <button> tag and then loop over document.getElementsByTagName('button').
So
const elements = document.getElementsByClassName("buy");
[...elements].forEach((element) => {
element.onclick = function(event) {
// Now you've got the event you can use it's target, parent or siblings
// to get some content from the wrapping element, something like this
// (you may need to change this but start with event.target)
const content = event.target.parent.innerHTML();
// Set that content on the modal
const modalContentElement = document.querySelector(".modalz-content p");
modalContentElement.innerHTML(content);
// Then open the modal!
modal.style.display = "block";
}
}
This question already has answers here:
How to make a video play when you open a modal box using JavaScript?
(3 answers)
Closed 2 years ago.
i'm new to html and web development, I am testing a basic page where a button opens a modal and in that modal there's a video.
Can you help me making it autoplay when the modal opens and stop when it closes? I tried a lot op options i found on the web but I can´t get it to work.
I started using w3schools examples.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<style>
body, button {font-family: 'Work Sans', sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 7px; /* 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
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
height: 30px;
background-color: white;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #004F9E;
color: white;
}
div.parent {
text-align: center;
}
ul {
display: inline-block;
text-align: left;
}
button {
background-color: #004F9E; /* Green */
border: 2px solid #004F9E;
border-radius: 5px;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
button {
transition-duration: 0.4s;
}
button:hover {
background-color: white;
color: black;
border: 2px solid #004F9E;
}
myBtn {
display: flex;
justify-content: center;
border: none;
}
</style>
</head>
<body>
<h2 style='text-align:center'>Titulo</h2>
<div class="parent">
<ul>
<li>order1.</li>
<li>order2.</li>
<li>orde3.</li>
</ul>
</div>
<!-- Trigger/Open The Modal -->
<div class="parent">
<button id="myBtn">Ver Video</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<span class="close">×</span>
<div style='text-align:center'>
<video width="100%"; height="95%" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</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 == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
You can use play() and pause()
document.getElementById('myVideo').play(); // <-- PLAY
document.getElementById('myVideo').pause(); // <-- PAUSE
In the example, I have commented on the places where I added these new lines
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<style>
body,
button {
font-family: 'Work Sans', sans-serif;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 7px;
/* 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
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
height: 30px;
background-color: white;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #004F9E;
color: white;
}
div.parent {
text-align: center;
}
ul {
display: inline-block;
text-align: left;
}
button {
background-color: #004F9E;
/* Green */
border: 2px solid #004F9E;
border-radius: 5px;
color: white;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
button {
transition-duration: 0.4s;
}
button:hover {
background-color: white;
color: black;
border: 2px solid #004F9E;
}
/* #myBtn {
display: flex;
justify-content: center;
border: none;
} */
</style>
</head>
<body>
<h2 style='text-align:center'>Titulo</h2>
<div class="parent">
<ul>
<li>order1.</li>
<li>order2.</li>
<li>orde3.</li>
</ul>
</div>
<!-- Trigger/Open The Modal -->
<div class="parent">
<button id="myBtn">Ver Video</button>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<span class="close">×</span>
<div style='text-align:center'>
<video id="myVideo" width="100%" height="95%" controls>
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</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"
document.getElementById('myVideo').play(); // <-- PLAY
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
document.getElementById('myVideo').pause(); // <-- PAUSE
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
document.getElementById('myVideo').pause(); // <-- PAUSE
}
}
</script>
</body>
</html>
Thanks to the help of another user, I was able to customize a popup that looks great, but I can't quite get the onclick to work so that the popup isn't displayed until the phone number is clicked. I'd like to show the phone number by itself, and once clicked, a popup will appear which will ask the user, "Call or Text?", then the user clicks on the button of their choice. Thank you!
var modal = document.getElementById('textCall');
var span = document.getElementById("close");
modal.style.display = "block";
span.onclick = function(){
modal.style.display = "none";
}
CSS
.dialogue {
display: none;
position: fixed;
z-index: 1;
padding-top: 150px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
#close, #closed {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#close:hover,
#close:focus,
#closed:focus,
#closed:hover {
color: #000000;
text-decoration: none;
cursor: pointer;
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
#textCall {
display: block;
}
HTML
<p onclick="textCall">555-5555</p>
<div id="textCall" class="dialogue">
<div class="modal-content">
<span id="close">×</span>
<h2>Call or Text?</h2>
Call
Text
</div>
</div>
</div>
This function is what you are looking for:
function textCall(e) {
modal.style.display = "block";
}
Check the snippet:
var modal = document.getElementById('textCall');
var span = document.getElementById("close");
var number = document.getElementById("number");
number.onclick = function() {
modal.style.display = "block";
};
span.onclick = function() {
modal.style.display = "none";
};
var modal = document.getElementById('textCall');
var span = document.getElementById("close");
span.onclick = function() {
modal.style.display = "none";
};
function textCall(e) {
modal.style.display = "block";
}
.dialogue {
display: none;
position: fixed;
z-index: 1;
padding-top: 150px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
#number {
cursor: pointer;
}
#close, #closed {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#close:hover,
#close:focus,
#closed:focus,
#closed:hover {
color: #000000;
text-decoration: none;
cursor: pointer;
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
<p id="number" onclick="textCall()">555-5555</p>
<div id="textCall" class="dialogue">
<div class="modal-content">
<span id="close">×</span>
<h2>Call or Text?</h2>
Call
Text
</div>
</div>
For this you need to initially set display:'none' to your modal. You can make onclick function for your elements and do show or hide your modal like this.
DEMO
function closeModal(e) {
document.getElementById('textCall').style.display = "none";
}
function textCall(e) {
document.getElementById('textCall').style.display = "block";
}
.dialogue {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.number {
cursor: pointer;
}
#close,
#closed {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#close:hover,
#close:focus,
#closed:focus,
#closed:hover {
color: #000000;
text-decoration: none;
cursor: pointer;
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
position: fixed;
top: 25%;
left: 25%
}
<p class="number" onclick="textCall(this)">555-5555</p>
<div id="textCall" class="dialogue">
<div class="modal-content">
<span onclick="closeModal(this)" id="close">×</span>
<h2>Call or Text?</h2>
Call
Text
</div>
</div>
Hey I am trying to bring this modal infront of the other elements on the page.
I already tried z-index: -1.
I would like to then implement this code on a adobe muse website and make the modal get an element from the selection of a combobox.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; front; /* Stay in place */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* 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 */
z-index: 1; /* Sit on top */
}
/* Modal Content */
.modal-content {
background-color: #00A1E0;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 511px;
height: 250px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #blue;
text-decoration: none;
cursor: pointer;
</style>
<body>
<style>
div.background {
border: 0px solid black;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #00A1E0;
border: 1px solid black;
opacity: 15%;
width: 511;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Add to shopping card
<div class="background">
<div class="transbox">
<style>
#myBtn { color: #00A1E0; }
div.background {
border: 0px #00A1E0;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #FF530D;
color: #00A1E0;
opacity: 80%;
width: 200;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #00A1E0;
}
#myModal { background: ; }
</style>
</button>
</div>
</head>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>you have added the classic business cards to the shopping cart</p>
</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 == modal) {
modal.style.display = "none";
}
}
{
document.getElementById("resultSection").style.fontSize = "350%";
document.getElementById("resultSection").innerHTML = "<H2></H2> " + result;
}
</script>
<style> #myBtn {
position: relative;
font-size: 34px;
}
</style>
</body>
</html>
Try this - comments amended to show what I have changed
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place front is invalid - may break your css so removed */
padding-top: 100px; /* Location of the box - don't know what this does? If it is to move your modal down by 100px, then just change top below to 100px and remove this*/
left: 0;
right:0; /* Full width (left and right 0) */
top: 0;
bottom: 0; /* Full height top and bottom 0 */
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 */
z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}
You also have a missing end bracket from your .close:hover and focus and you seem to have a nested style within div.background - unless you are using a css pre-processor, then this is invalid css
I have created a page with a div that when clicked produced a popup modal popup box as per this how to - http://www.w3schools.com/howto/howto_css_modals.asp
The code I have so far is:
JS -
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("drawer1");
// 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";
}
}
CSS -
/* 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
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
#drawer1 {
position: absolute;
border-style: solid;
border-width: 2px;
border-color: red;
width: 22.5%;
height: 9.5%;
top: 5%;
left: 2%;
}
#drawer2 {
position: absolute;
border-style: solid;
border-width: 2px;
border-color: red;
width: 22.5%;
height: 9.5%;
top: 5%;
left: 26.5%;
}
HTML -
<!-- Trigger/Open The Modal -->
<div id="drawer1"></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<div id="drawer2"></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Sodjshdjhfjhsdfjhsdjhfjdy</p>
<p>kjbhdfkjbfkjdnbskjfnbdskjbf</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
This works fine for one div but what i really want is to have multiple divs on the page that will each open their own modal box.
Is there a way to do this using this code or am I going to have to look at a different approach?
If you want to have multiple modals then you should create a class the wraps the functionally. In each class you have a reference to the dom element that is displayed and methods to remove and add it from the page.
ie
function modal(title, description, ) {
this.element = //create element
}
modal.prototype = {
destroy and add methods
}