I created 2 buttons on HTML, and by pressing a button, it will open a modal screen. This eaxmple is with 2 buttons, but my aim is that a page could have multiple buttons.
When pressing the X it closes the modal screen.
But, if you press outside the modal area, it should close it as well.
This does not work for both buttons.
Any help would be appreciated, or if you know of a easier/better way to work with modal screens. :-)
{
<!DOCTYPE html>
<html>
<head>
<style>
/* 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>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn0">Open Modal 0</button>
<!-- The Modal -->
<div id="myModal0" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal 0..</p>
</div>
</div>
<button id="myBtn1">Open Modal 1</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal 1..</p>
</div>
</div>
<script>
// Get the modal
var modal0 = document.getElementById('myModal0');
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn0 = document.getElementById("myBtn0");
var btn1 = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span0 = document.getElementsByClassName("close")[0];
var span1 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn0.onclick = function() {
modal0.style.display = "block";
}
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span0.onclick = function() {
modal0.style.display = "none";
}
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal0) {
modal0.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
</body>
</html>
}
You have two window.onclick = function(event) Second one overrides first one.
So you really should have only one window.onclick handler:
<!DOCTYPE html>
<html>
<head>
<style>
/* 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>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn0">Open Modal 0</button>
<!-- The Modal -->
<div id="myModal0" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal 0..</p>
</div>
</div>
<button id="myBtn1">Open Modal 1</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal 1..</p>
</div>
</div>
<script>
// Get the modal
var modal0 = document.getElementById('myModal0');
var modal1 = document.getElementById('myModal1');
// Get the button that opens the modal
var btn0 = document.getElementById("myBtn0");
var btn1 = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span0 = document.getElementsByClassName("close")[0];
var span1 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal
btn0.onclick = function() {
modal0.style.display = "block";
}
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span0.onclick = function() {
modal0.style.display = "none";
}
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal0) {
modal0.style.display = "none";
}
else if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
</body>
</html>
Related
How can i make when I click on the card it opens a "modal window" with information about the product.
<div class="card">
<div class="imgBox">
<img src="./img/bau.png" alt="Produto" class="mouse">
</div>
<div class="contentBox">
<h3>Plugin</h3>
<h2 class="price">25.<small>00</small> BRL</h2>
Comprar Agora!
</div>
</div>
There are several approaches. And there is no real right or wrong here either.
The approach has to fit your application. If you always try to keep the approach somewhat abstract, there is nothing fundamentally wrong with it.
In the example below, I have taken the linked modal example from the comment
below your question and adapted the following.
added a data object in which I manage the corresponding contents of the modal.Here you can also use an API call against an interface.
I have assigned an EventListener to all buttons.
The parts that are variable in the modal are exchanged with the corresponding content when clicked.
Done!
const modalData = [
{id: 1, title: "Title One", content: "bla"},
{id: 2, title: "Title Two", content: "bla blu"},
];
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btns = document.querySelectorAll(".myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btns.forEach(b => {
b.addEventListener('click', (e) => {
modal.style.display = "block";
const dataId = e.target.getAttribute("data-id")
const data = modalData.filter(m => m.id == dataId);
const modalTitle = document.querySelector("#myModal .title");
const modalContent = document.querySelector("#myModal .content");
modalTitle.innerHTML = data[0].title;
modalContent.innerHTML = data[0].content;
})
});
// 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 {
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;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button class="myBtn" data-id="1">Open Modal 1</button>
<button class="myBtn" data-id="2">Open Modal 2</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 class="title">Modal Header</h2>
</div>
<div class="modal-body content">
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</body>
I just want to share my code here where I got the Idea on W3schools. I already search of the same topic, but it didn't solve the problem of my Code.
/* The Modal (background) MY CSS CODE*/
.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 */
}
/* The Modal1 (background) */
.modal1 {
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 */
}
And heres the Javascript Code
<!-- Javascript -->
<script>
// Get the modal
var modal = document.getElementByclass("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>
<script>
// Get the modal1
var modal = document.getElementByIclass("myModal1");
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[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>
And Lastly, the HTML Code
<!-- Trigger/Open The Modal -->
<button id="myBtn">Apply Now</button>
<!-- The Modal -->
<div class="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!-- Trigger/Open The Modal1 -->
<button id="myBtn1">Apply Now</button>
<!-- The Modal -->
<div class="myModal1" class="modal1">
<!-- Modal content -->
<div class="modal-content">
<span class="close1">×</span>
<p>Some text in the Modalsssssss..</p>
</div>
</div>
I've been kinda stuck with this for a long time. Any opinion or suggestions will be greatly appreciated.
**** UPDATE**
Read your comment and I agree, this is pretty "hacky" and I personally would almost never do this. So I want to show you a solution which is closer to what I would do on a production site. A quick overview:
The code for the actual modal is good, so we can use that.
What I think is "hacky" here is the way we get the data to feed to the modal. Storing data in HTML elements is not terrible, but there are way better ways to do this.
A good way to store this kind of data (strings, numbers, etc.) is with JSON.
We can include the JSON data in the document itself, or we can use AJAX to store it in a different location. Could be a file on the server, or maybe a database somewhere.
More info on $.getJSON() method.
/* Same code from previous example. New code marked with comments */
$("body").on("click", ".toggle-modal", function() {
if ($(".modal").is(":visible")) {
$(".modal").fadeOut("fast", function() {
$(this).remove()
});
} else {
/* Get the data ID from the html element */
const data_id = $(this).data("modal-text");
/* Get JSON data from file on server (simplified)
Replace the url with the path to your JSON file on the server. */
$.getJSON("https://httpbin.org/json", function(response) { // <-- Callback function
/* This is the "callback" function from the "getJSON" method
This fires when the AJAX request has been completed
This function has access to the AJAX response variable which contains the returned data */
/* Light validation here just checks if the response is json */
if (typeof response == 'object') {
/* For kicks let's check out the response */
console.log(response);
/* The response is obviously not our data. Next variable emulates correct response */
response = {
primary_modal: "The message for the primary modal",
secondary_modal: "The message for the secondary modal"
}
/* Get the correct message from the response.
Use the value from the data attribute as the key to find our data in the json structure */
const msg = response[data_id];
/* Launch the modal */
const modal = $("<div />", {
"class": "modal"
}).append(
$("<div />", {
"class": "modal-overlay toggle-modal"
}),
$("<div />", {
"class": "modal-container"
}).append(
$("<div />", {
"class": "modal-close toggle-modal"
}),
$("<div />", {
"class": "modal-content"
}).text(msg) // <-- The message
)
).appendTo("body")
.fadeIn("fast")
.css("display", "flex");
} else {
return "Couldn't get the data";
}
});
}
})
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: cyan;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
padding: 20px;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, .8);
cursor: pointer;
}
.modal-container {
background: white;
margin: auto;
position: relative;
font-size: 16px;
line-height: normal;
text-align: center;
font-weight: bold;
z-index: 20;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
font-family: sans-serif;
font-size: 14px;
line-height: 1;
overflow: hidden;
cursor: pointer;
padding: 8px 20px;
background: coral;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.modal-close:before {
content: "X"
}
.modal-content {
padding: 35px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- We removed the modal data and added a reference to the data in the json -->
<div>
<button class="toggle-modal" data-modal-text="primary_modal">Click Here</button>
<button class="toggle-modal" data-modal-text="secondary_modal">Click Here</button>
</div>
Here is a really easy way to re-purpose a modal template for different content using jQuery. Basically you store the message right in the button's data attribute, then just append that content to the dynamically generated modal.
/* Listen for the click event on the button */
$("body").on("click", ".toggle-modal", function() {
/* Check if modal is open */
if ($(".modal").is(":visible")) {
/* if modal is already visible close it out */
$(".modal").fadeOut("fast", function() {
$(this).remove()
});
} else {
/* Get message from button */
const msg = $(this).data("modal-text");
/* dynamically create modal elements */
const modal = $("<div />", {
"class": "modal"
}).append(
$("<div />", {
"class": "modal-overlay toggle-modal"
}),
$("<div />", {
"class": "modal-container"
}).append(
$("<div />", {
"class": "modal-close toggle-modal"
}),
$("<div />", {
"class": "modal-content"
}).text(msg) /* Append text to modal */
)
).appendTo("body") /* Append modal to body */
.fadeIn("fast") /* Fade in modal */
.css("display", "flex") /* Flexbox to center content */
}
})
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: cyan;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
padding: 20px;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, .8);
cursor: pointer;
}
.modal-container {
background: white;
margin: auto;
position: relative;
font-size: 16px;
line-height: normal;
text-align: center;
font-weight: bold;
z-index: 20;
}
.modal-close {
position: absolute;
top: 0;
right: 0;
width: 12px;
height: 12px;
font-family:sans-serif;
font-size:14px;
line-height:1;
overflow: hidden;
cursor: pointer;
padding: 8px 20px;
background: coral;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.modal-close:before {
content: "X"
}
.modal-content {
padding: 35px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Set the modal text right in the data attribute of the button. This approach works for short messages but may not be well suited for more complex content -->
<div>
<button class="toggle-modal" data-modal-text="Short message to be displayed in the first modal">Click Here</button>
<button class="toggle-modal" data-modal-text="A different message for the secondary modal">Click Here</button>
</div>
I am new to coding and i am implementing chatbot and it's working fine in chrome. But when i am trying in mozilla and edge and when i am giving input it's not taking input.
Below is error i am getting when i inspect element in edge. Can anyone please tell what i am doing wrong and please tell me if any changes required in code.
Here is my html code.
// Get the modal
var newmodal = 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() {
newmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
newmodal.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";
}
}
.newmodal {
width: 300px;
background-color: white;
position: absolute;
bottom: 41px;
right: 43px;
display: none;
}
.click-meq {
height: 60px;
width: 60px;
position: absolute;
bottom: 10px;
right: 10px;
}
img {
position: fixed;
bottom: 15px;
right: 15px;
height: 60px;
width: 60px;
}
.click-me1 {
height: 40px;
background-color: blue;
color: white;
width: 300px;
position: absolute;
bottom: 0;
right: 10px;
}
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="newmodal" id="myModal">
<div class="close-btn">
<span class="close">×</span>
</div>
< "MY Iframe Here">
</div>
<button class="click-me" id="myBtn"><img src="C:\Users\Resemble\Downloads\chat1.png"></button>
</div>
I have 3 divs (each div have a popup window to display once the div is clicked)
Right now, popup window is displaying related to the div selected, But not in particular location. current
The expected popup modal should be near the selected div like below
expected
The CSS code so far
.ui-selectee{
position: relative;
display: inline-block;
border-right-style: solid;
border-bottom-style: solid;
border-top-style: solid;
border-width: 0.1rem;
border-color: #B2BABB;
width: 4.1rem;
max-width: 4.1rem;
max-height: 2.3rem;
height: 2.3rem;
margin: 0;
overflow: hidden;
cursor: pointer;
/* white-space: nowrap; */
}
/* The actual popup window : reservation detail; */
#ReservationBookedBlock, #ReservationBookedBlock1{ /* visibility: hidden; */
background-color: white;
color: black;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
top: 125%;
left: 50%;
margin-left: -80px;
border: dotted; width:38rem; padding:1rem;
}
.ui-selectee .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;}
/* The arrow of the popup */
.ReservationBookedBlock_cssClass ::after{
content: "";
position: absolute;
bottom: 100%;
right: 50%;
margin-left: -25px;
margin-bottom: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;/* Add animation (fade in the popup) */ #-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}}#keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}}
Related html markup (THe code is written in Salesforce visualforce)
<script>
// jQuery script
// Get the modal
var modal = document.getElementById('myModal');
var resBooked=document.getElementById('ReservationBookedBlock');
// Get the button that opens the modal
var buttonCell = document.getElementsByClassName("ui-selectee");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
for (var i = 0; i < buttonCell.length; i++) {
buttonCell[i].onclick = function() {
var cellNumber1 = $(this).attr('id');
//alert($(this).attr('id'));
var resNo=document.getElementById(cellNumber1).style.backgroundColor;
//alert(resNo);
//alert(resNo.length);
if(resNo == 'red' || resNo == 'green'){
//alert('Its already reserved');
// resBooked.style.display = "block";
//alert('document.getElementById(cellNumber1).innerHTML-->'+document.getElementById(cellNumber1).innerHTML);
ReservationBookedCallBack(document.getElementById(cellNumber1).innerHTML);
ui-selectee.classList.toggle('show');
}
else
modal.style.display = "block";
var id = $(this).attr("data-id").split(":");
console.log(id);
var roomName = $(document.getElementById(id[0]+'')).text();
let currentDate = $('#datepicker-container').datepicker("getDate");;
var startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + - 1 + parseInt(id[1]));
console.log(roomName,startDate);
localStorage.setItem('roomName', roomName);
localStorage.setItem('startDate', startDate);
document.getElementById("roomname").value = roomName;
var strdt = startDate.getFullYear()+"-"+ startDate.getMonth()+"-"+ startDate.getDate()
document.getElementById("stdate").value = startDate;
// alert('room name : '+roomName);
//alert('date : '+strdt );
}
}
// 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>
</div>
<script>
$(document).ready(function() {
$("#datepicker-container").trigger('click');
console.log(1);
});</script></body><apex:actionFunction name="ReservationBookedCallBack" action="{!ReservationBooked}" reRender="ReservationBookedBlock1,ReservationBooked">
<apex:param name="ReservationName" assignTo="{!ReservationName}" value="" /></apex:actionFunction>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
Hi im following the tutorial on w3 schools on modals
http://www.w3schools.com/howto/howto_css_modals.asp
but i cant seem to get mine to open at all. is there anything in my code that is going wrong or am i missing something.
or is there any different ways that you would recommend i do this?
<?php
session_start();
include 'loginlogoutregister.php';
//connecting to database
$link = mysqli_connect("localhost","root","","authentication");
if(isset($_POST['Login_Btn'])){
login($link);
}
if(isset($_POST['Register_Btn'])){
register($link);
}
if(isset($_POST['Logout_Btn'])){
logout($link);
}
?>
<html>
<head>
<Title>LogIn</Title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var modal = document.getElementById('PopUpLR');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closeLR")[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";
}
}
</script>
</head>
<body>
<div class = "headerContainer">
<div class = "headerLeft">
test
</div>
<div class="headerMiddle">
<h1>Website</h1>
<div><h4>
<?php
if(isset($_SESSION['username']) ){
echo "Welcome ".$_SESSION['username'];
}else{
echo "Logged Out ";
}
?>
</h4></div>
</div>
<div class = "headerRight">
<div class = "loginRegister">
<p>Login/Register</p>
</div>
</div>
</div>
<button id="myBtn">Open Modal</button>
<div id = "PopUpLR">
<div class = "PopUpLRContent">
<span class="closeLR">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
#PopUpLR{
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 */
}
.PopUpLRContent{
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 */
}
.closeLR {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.closeLR:hover,
.closeLR:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
moving the script to the bottom of the body tag solved this issue
Move your script <script>
var modal = document.getElementById('PopUpLR');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("closeLR")[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";
}
}
</script>
under your HTML so the button knows what its sending to!