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
Related
Heres the link to the w3 page https://www.w3schools.com/howto/howto_css_modal_images.asp, and all the changes made is only in the javascript. Note that the one in the w3 page isnt working so i had to find a solution from this page and found this https://jsfiddle.net/snowMonkey/f1zav0ge/ and i took only the javascript code from here, and both still doesnt work
Heres the html:
<html>
<head>
<title>Gallery | safsafa</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="gallery.css">
<link rel = "icon" href = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUXLH90QAaWzieHLTW9BxxNvSKIEhAzRzJ1g&usqp=CAU" type = "image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<header>
<h1><span><i class="fa fa-trophy" aria-hidden="true"></i> fsasaf</span></h1>
<ul class="nav_links">
<li>Gallery</li><li>Showcase</li><li>About</li><li class="nav-seperator">|</li>
</ul>
</header>
<main>
<div class="container">
<h2>//CLICK THESE IMAGES</h2><br>
<img class="myImages" id="myImg" src="image/racoon.jpg" alt="A Racoon" style="width:100%;max-width:300px">
<img class="myImages" id="myImg" src="image/hamster.jpg" alt="A Hamster" style="width:100%;max-width:300px">
<img class="myImages"id="myImg" src="image/hedgehog.jpg" alt="A Hedgehog" style="width:100%;max-width:300px">
<img class="myImages" id="myImg" src="image/artic_fox.jpg" alt="An Artic Fox" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
</main>
<script>
window.addEventListener('scroll',function(){
var header = document.querySelector("header");
header.classList.toggle('sticky',window.scrollY > 0)
})
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="aos.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImages');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
And heres the css:
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Heebo:wght#500&display=swap');
*{
margin: 0;
padding: 0;
}
body{
background-color: #9dc1fc;
}
header{
position: fixed;
overflow: hidden;
top: 0;
width: 100%;
background-color:;
transition: 0.6s;
z-index:10000000;
}
header span{
font-family:Poppins, sans-serif;
cursor: pointer;
font-size: 125%;
font-weight: 900;
padding-left: 70px;
}
header .nav-seperator{
color: black;
cursor: pointer;
}
header span{
letter-spacing:-2px;
font-size: 115%;
color: blackc;
}
header ul{
font-family:Heebo, sans-serif;
font-weight: 6200;
font-size: 100%;
list-style-type: none;
padding-right: 100px;
}
header li{
display: inline-block;
}
header li a{
margin-right:30px;
text-decoration: none;
color: black;
transition: all 0.3s ease 0s;
}
header li a:hover{
color: #fe6e00;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
header.sticky{
background-color:rgba(0,0,0,0.5)
}
header.sticky ul li a{
color: white;
}
header.sticky span{
color: white;
}
header.sticky .nav-seperator{
color: white;
}
/* MAIN CONTAINER*/
main .container{
margin-top: 100px;
margin-left: 200px;
margin-right: 200px;
text-align:center;
text-transform:uppercase;
color:black;
font-family: Poppins;
font-size: 2rem;
font-weight: 900;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
Currently, the close button on the modal window remains below the navigation and therefore cannot be clicked. In order to be able to close the modal it is necessary to make these two changes in CSS:
On style header set z-index: 10;
On style .modal set z-index: 11;
This change he made so that when the modal window opens it will stand above the navigation and the "close" button can be clicked.
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>
I am having a hard time understanding why this code does not close the modal. I can open just fine, and when clsoing, i can catch the console log but the rest of the code does not run. I get no error in console and feel as if I could just be overlooking something very small. Any help is much appreciated!
<style>.corporate-about-us .section h2 { border-bottom: 1px solid #ddd; } .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; padding: 20px; border: 1px solid #888; width: 70%; } /* 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; }</style>
<span class="sub-heading" id="dailyq1btn" onclick="openModal('dailyq1')">Daily Question 1</button>
<!-- The Modal -->
<div id="dailyq1" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('dailyq1')">×</span>
<div class="faq-info">
<h2 class="faq-question sub-heading">Place Holder Title</h2>
<p>Place Holder Body</p>
</div>
</div>
</div>
<script>
function openModal(questionId) {
let modal = document.getElementById(questionId);
modal.style.display = "block";
}
function closeModal(questionId) {
console.log(questionId)
let modal = document.getElementById(questionId);
modal.style.display = "none";
}
</script>
It works fine if you fix the button DOM, you're using a <span></button>
function openModal(questionId) {
let modal = document.getElementById(questionId);
modal.style.display = "block";
}
function closeModal(questionId) {
console.log(questionId)
let modal = document.getElementById(questionId);
modal.style.display = "none";
}
.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;
padding: 20px;
border: 1px solid #888;
width: 70%;
}
/* 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;
}
<button class="sub-heading" id="dailyq1btn" onclick="openModal('dailyq1')">Daily Question 1</button>
<!-- The Modal -->
<div id="dailyq1" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('dailyq1')">×</span>
<div class="faq-info">
<h2 class="faq-question sub-heading">Place Holder Title</h2>
<p>Place Holder Body</p>
</div>
</div>
</div>
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";
}
}
I want to show a map direction to the user and I want to show this map in a popup iframe tag. How we can show this map in iframe tag
Here is the link which I want to show in iframe tag in my code
I do not know why this is not working. Thanks in advance for your great thoughts
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* 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 */
padding-top: 10px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
height:auto;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">View Map Direction</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<iframe src="https://www.google.com/maps/dir/31.5282618,74.3234164/University+of+South+Asia,+47+Tufail+Rd,+Lahore/#31.5308165,74.3164608,13z/data=!3m1!4b1!4m10!4m9!1m1!4e1!1m5!1m1!1s0x3919050d90b4fac3:0xa46dbb2def95e45a!2m2!1d74.3781741!2d31.5328815!3e"></iframe>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
In your case you are trying to load map in iframe and iframs's 'X-Frame-Option' is set to 'SAMEORIGIN'. so it is not load in iframe.
You can't set X-Frame-Options on the iframe. That is a response header set by the domain from which you are requesting the resource (www.google.com in your example). They have set the header to SAMEORIGIN in this case, which means that they have disallowed loading of the resource in an iframe outside of their domain. For more information see The X-Frame-Options response header on MDN.
You can add map in iframe using below link:
How to load a Google Map in an iframe with Javascript?
You can simply add the embedded link of a place from the google map in the src.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.5366640845264!2d76.93905241410239!3d8.544280398746274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b05b96a8025dc21%3A0x433a8ad4eeb21137!2sB-Hub!5e0!3m2!1sen!2sin!4v1551781850948" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>