Develop Reference

Modal Opening Unintentionally On Load

Hi there I am having problems with a modal I have implemented on my site where the modal is open upon loading the site, I wish to have it only open when the correct button is pressed. Additionally it is moving down all other divs below it even though I have the position as absolute and its parent div as relative.
Please see code below
<header class="col-1" id="myBtn" style="margin-top: 10px; border: .25rem solid #E86E5E; font-size: .9rem; z-index: 0;">Contact</header>
<!-- The Modal -->
<div id="contact" class="modal">
<!-- Modal content -->
<div class="contact-content">
<span class="close">×</span>
<p class="modal-title">Get in touch.</p>
<form action="/action_page.php" style="margin-left: 20px;">
<label for="fname">Full Name</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="email">Email</label><br>
<input type="text" id="email" name="email" value=""><br>
<label for="email">Company</label><br>
<input type="text" id="company" name="company" value=""><br>
<label for="company">Company</label><br>
<input type="text" id="subject" name="subject" value=""><br><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("contact");
// 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>
.contact {
display: none; /* Hidden by default */
position: absolute; /* Stay in place */
z-index: 100; /* 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 */
}
.contact-content {
background-color: #222222;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
color: #FFFFFF;
font-weight: bold;
}
/* 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;
}
.modal-title {
font-size: 5vw;
}
Any advice you can offer would be greatly appreciated.

Your CSS is hiding a non-existent element by class while the element you’re wanting to style is using an id.
You need to change the selector in CSS from .contact to #contact, or you could select .modal since the element has a class titled “modal”.

Script works in html, but not externally [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am pretty new to this game, and I am trying to make a website, using new tricks as i go along.
I am coding a set of buttons to instead of going to another page, pop-up (Modal i think its called?)
it works well when i have all the script in HTML but will not work for me when I put the code externally.
ONLY WORKING ON THE ABOUT BUTTON CURRENTLY
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
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";}}
*
{
margin: 0;
padding: 0;
}
header
{
background-image: url("../images/webBack.jpg");
background-color: powderblue;
height: 100vh;
background-size: cover;
background-position: center;
}
a{
color: black;
}
a:hover{
color:white;
transition-duration: 0.3s;
}
.row{
position: center;
max-width: 95%;
margin: auto;
}
.logo img{
width: 150px;
height: auto;
float: left;
}
.main-nav{
float:right;
list-style:none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.button1 {
background-color: cornflowerblue;
opacity: 0.2;
font-size: 16px;
text-align: center;
padding: 14px 28px;
border: 2px solid black;
transition-duration: 0.2s;
cursor: pointer;
}
.button1:hover{
background-color: cornflowerblue;
color: white;
opacity: 1;
font-size: 18px;
}
.modal{
display: none;
position: fixed;
z-index: 1;
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: aliceblue;
margin-top: 150px;
margin-left: 25%;
padding: 20px;
border: 2px solid whitesmoke;
width: 50%;
height: 50%;
overflow: auto;
}
.close{
color: gray;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
body{
font-family: monospace;
}
.Hero{
position: absolute;
margin: 500px;
margin-left: 25%;
margin-top: 0;
pointer-events:none;
}
h1{
color:white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
margin-top: 275px;
}
p{
color: black;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<script src="scripts/main.js"></script>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">&times</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
</body>
</html>
in the snippet it works...
I am using IntelliJ
maybe something in the HTML?
I can't figure it out.

You are referencing your script before the elements exist. Just reference the script after they exist. Try putting your script tag above your end body tag. I tested with your code and this does the job.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">&times</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>
Alternatively, you can tell your JS to execute after the page is ready if you want to leave the script tag where it is. Although this code below may not be completely cross browser compatible, you can also do it with Jquery instead of pure javascript which should defintely be cross browser compatible.
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
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";}}
});
If you decide to include Jquery in your HTML then you can do this.
$( document ).ready(function() {
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
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";}}
});
If you want to try the jquery solution just put this in between your head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Hide and Un-hide div elements using javascript

i have two DIV named[DIV1,DIv2] inside my page , where i can hide and un-hide each one of them, now is it possible when page will load automatically DIV1 will show then Div2 will hide and when you click the button to show DIV2 then automatically DIV1 will hide. i have provided example below..
function myFunction1() {
var x = document.getElementById("myDIV1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
</body>
</html>

An ideal approach would be to create a class (hidden as in the example below) which hides a particular element. Assign this class initially to second div so that it doesn't appear when page loads.
Then you can add/remove this class on particular elements when the function runs, as desired.
See the demo below:
function myFunction1() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
x.classList.remove('hidden');
y.classList.add('hidden');
}
function myFunction2() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
y.classList.remove('hidden');
x.classList.add('hidden');
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
.hidden {
display: none;
}
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2" class="hidden">
This is Second Div.
</div>

Now at least one div will be there on the screen.
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
function myFunction1() {
x.style.display = "block";
y.style.display = "none";
}
function myFunction2() {
y.style.display = "block";
x.style.display = "none";
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
display:none;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<button onclick="toggleDisplay()">Div1</button>
<button onclick="toggleDisplay()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div id="myDIV2">
This is Second Div.
</div>
<script>
function toggleDisplay() {
var div1 = document.getElementById("myDIV1");
var div2 = document.getElementById("myDIV2");
if (div1.style.display === "none") {
div1.style.display = "block";
div2.style.display = "none";
} else {
div1.style.display = "none";
div2.style.display = "block";
}
}
</script>
</body>
</html>
you can have one function to handle this though :-)
toggling block and none for display css

If you are using bootstrap4 then there is already 'd-none' class. you can use that. check below snippet.
function myFunction1() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
x.classList.remove("d-none");
y.classList.add("d-none");
}
function myFunction2() {
var x = document.getElementById("myDIV1");
var y = document.getElementById("myDIV2");
y.classList.remove("d-none");
x.classList.add("d-none");
}
#myDIV1 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: blue;
margin-top: 20px;
}
#myDIV2 {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: red;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<button onclick="myFunction1()">Div1</button>
<button onclick="myFunction2()">Div2</button>
<div id="myDIV1">
This is First Div.
</div>
<div class="d-none" id="myDIV2">
This is Second Div.
</div>
</body>
</html>

Creating modal window for displaying videos

Stuck at creating a modal window and make it pop on click. The modal items are not even displaying at my browser, but they do in JSFid. Is it the browser or is it the code? Also curious what exactly am I doing wrong, trying for quite a lot.The HTML:
<section id="modals">
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div>
<div class="modal-content">
<span class="close">×</span>
<div class="modal clearfix">
<div class="modal-menu">
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
</div>
<div class="modal-content">
<div class="modal-header">Header</div>
<div class="modal-body">Body</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>
</div>
</div>
The CSS:
.modal{
box-sizing: border-box;
width: 500px;
height: 300px;
background: gray;
}
.modal:before{
box-sizing:inherit;
}
.modal-menu,
.modal-content {
height: 100%;
float: left;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.modal-menu {
width: 20%;
background: #257562;
overflow: auto;
}
.modal-content {
width: 80%;
padding: 50px 0;
position: relative;
background: blue;
}
.modal-header,
.modal-footer {
width: 100%;
height: 50px;
position: absolute;
left: 0;
}
.modal-header {
top: 0;
background: #E85C74;
}
.modal-body {
height: 100%;
background: #F9D24F;
}
.modal-footer {
bottom: 0;
background: #752570;
}
.modal-menu-item {
width: 100%;
height: 50px;
margin-bottom: 15px;
background: #F48829;
}
.modal-menu-item:last-of-type {
margin-bottom: 0;
}
The JS:
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";
}
}

If you are using Bootstrap modal you must include JQuery Library in your page and try the below code for hide/show modal::
$('#myModal).modal('show'); // For displaying the modal
$('#myModal').modal('hide'); // For hiding the modal

JavaScript not working in aspx C# webpage

My JavaScript is not working, when I put it in asps webpage inside a script tag. Code is in the images and in code as well.
It is actually a model box to open images like lightBox/fancyBox but it only open the model box for 1 second, but it works in normal html page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="img-model.aspx.cs" >Inherits="webpages_img_model" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>model box</title>
<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: 60%;
height:auto;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.clear {
clear:both;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-content .p1 {
float:left;
border-right:1px;
width:50%;
}
.modal-content .p2 {
float:right;
width:50%;
}
#img {
position:relative;
width:400px;
height:400px;
}
#img #mm{
position:absolute;
top:0px;
right:0px;
z-index: 16;
}
#img img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>Modal Example</h2>
<div id="img">
<a href="">
<img src="../images/1pic.jpg" width="400px" height="400px" />
<span id="mm"><button id="d">MM</button> </span>
</a>
</div>
<!-- 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>
<div class="p1" >
<img src="../images/1pic.jpg" height="100%" width="80%" > />
</div>
<div class="p2">
<p>Some text in the Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<p>Some text ithe Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<input id="Button1" type="button" value="button" />
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
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>
</form>
</body>
</html>

As I commented your issue when the user clicks on the Open Modal button it submits the form which means essentially reloaded the page. What you need to do is return false on your btn.onclick = function () function. For simplicity I have posted all the code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="img-model.aspx.cs" >Inherits="webpages_img_model" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>model box</title>
<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: 60%;
height:auto;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.clear {
clear:both;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-content .p1 {
float:left;
border-right:1px;
width:50%;
}
.modal-content .p2 {
float:right;
width:50%;
}
#img {
position:relative;
width:400px;
height:400px;
}
#img #mm{
position:absolute;
top:0px;
right:0px;
z-index: 16;
}
#img img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>Modal Example</h2>
<div id="img">
<!-- added # -->
<a href="#">
<!-- I would set the dimensions width and height in CSS -->
<img src="../images/1pic.jpg" width="400" height="400" />
<span id="mm">
<button id="d">MM</button> </span>
</a>
</div>
<!-- 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>
<div class="p1" >
<img src="../images/1pic.jpg" height="100" width="80" />
</div>
<div class="p2">
<p>Some text in the Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<p>Some text ithe Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<input id="Button1" type="button" value="button" />
</div>
<div class="clear">
</div>
</div>
</div>
<script type="text/javascript">
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";
/* added to prevent the page to submitting */
return false;
}
// 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
/* got rid of the $window and just replaced it with window */
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</form>
</body>
</html>
I made some other changes as well to the html and javascript, see inline comments