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”.
Related
I'm trying to open a window whenever you submit a form with the correct values but it's not opening, can you help me with this? I've tried messing around with it trying some stuff but I just can't get it to work.
<form>
<div class="box">
<input name="name" class="form-tag" placeholder="Name" disabled/>
<input type="text" name="name" id="fullname" class="form-control" required/>
<input type="email" name="email" class="form-tag" placeholder="Email" disabled/>
<input type="email" name="email" id="emailaddress" class="form-control" required/>
<div class="button">
<button id="button" type="submit" class="btn btn-light btn-lg modal-button">Submit</button>
</div>
</div>
</form>
<div class="modal-bg">
<div class="modal">
<h5>congratulations!</h5>
<span class="modal-close">x</span>
</div>
</div>
var modalButton = document.querySelector('.modal-button');
var modalBg = document.querySelector('.modal-bg');
var modalClose = document.querySelector('.modal-close');
document.getElementById("button").onsubmit = checkForm();
function checkForm(){
if (document.getElementById('fullname').value == "" && document.getElementById('emailaddress').value == ""){
return;
}
else{
return modalButton.addEventListener('click',function(){
modalBg.classList.add('bg-active');
});
modalClose.addEventListener('click',function(){
modalBg.classList.remove('bg-active');
})
}
}
In the below code, we have a form. And whenever we submit the form, and fields are not empty, it displays the modal window. Incase fields are empty it shows an alert window.
Please note that the button doesn't submit the form. Instead, it only validates the fields and displays the modal window. If you want to submit the form, you can add document.forms("myForm").submit(); in your script.
// Get the modal
var modal = document.getElementById("myModal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
document.getElementById("button").onclick = function() {
if(document.getElementById("fullname").value === "" || document.getElementById("emailaddress").value === ""){
alert("Fields Empty");
}else{
modal.style.display = "block"; //Display modal if fields has some value
}
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
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<html>
<head>
</head>
<body>
<h2>Please fill out the form</h2>
<form id="myForm">
<div class="box">
<label for="fullname" class="form-tag" >Name :</label>
<input type="text" name="name" id="fullname" class="form-control" required/></br>
<label for="email" class="form-tag" >Email :</label>
<input type="email" name="email" id="emailaddress" class="form-control" required/></br>
<div class="button">
<button id="button" class="btn btn-light btn-lg modal-button">Submit</button>
</div>
</div>
</form>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Congrats!!</p>
</div>
</div>
</body>
</html>
I am approximately 24 seconds away from lighting my underwear on fire in frustration.
Essentially, I am making a simple contact info form that will submit the inputs to an external PHP page for processing, and, relevant to this question, pops up a second modal upon submission that confirms to the user that the form was sent. Figuring out how to get the form to stay on the same page when you press 'submit' is a problem for another day; what I don't understand is why the second modal, the one that says "Thank you for your interest etc. etc.", will not appear when you hit the 'submit' button. It's driving me crazy!
Thanks for your help, I'm an amateur coder and am open to any and all advice/critique.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
.modal2 {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal2-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
</style>
<button id="myButton">Contact</button>
<div id="myModal" class="modal">
<div action="" class="modal-content">
<span id="close">×</span>
<p class="formHeader">Let's Work Together...</p>
<p id="formSubheader">Name</p>
<input type="type" name="firstName" placeholder="First" class="inputBox1">
<input type="type" name="lastName" placeholder="Last" class="inputBox1">
<p id="formSubheader">Email</p>
<input type="email" name="email" placeholder="Example#Email.com" class="inputBox2">
<p id="formSubheader">Phone</p>
<input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
<p id="formSubheader">Project Description</p>
<textarea name="description" class="inputBox4"></textarea>
<br>
<button type="submit" id="myButton2">Submit</button>
</div>
</div>
<div id="myModal2" class="modal2">
<div class="modal2-content">
<span id="close">×</span>
<p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal2");
var btn = document.getElementById("myButton");
var btn2 = document.getElementById("myButton2");
var close = document.getElementById("close");
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "none";
modal2.style.display = "block";
}
close.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal)
modal.style.display = "none";
modal2.style.display = "none";
}
</script>
</body>
</html>
Your problem is this chunk of code here:
window.onclick = function(event) {
if (event.target == modal)
modal.style.display = "none";
modal2.style.display = "none";
}
I'm not sure what you are intending to do with that, but remember, if no curly braces are provided with your if statement, then only the line directly after your if condition will execute. Your second line will always execute. So you are effectively hiding modal2 on every single click event (since your listening to window.onclick). I don't think you want that.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
.modal2 {
display: none;
position: fixed;
z-index: 1;
overflow: scroll;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.modal2-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid;
width: 95%;
position: relative;
}
</style>
<button id="myButton">Contact</button>
<div id="myModal" class="modal">
<div action="" class="modal-content">
<span id="close">×</span>
<p class="formHeader">Let's Work Together...</p>
<p id="formSubheader">Name</p>
<input type="type" name="firstName" placeholder="First" class="inputBox1">
<input type="type" name="lastName" placeholder="Last" class="inputBox1">
<p id="formSubheader">Email</p>
<input type="email" name="email" placeholder="Example#Email.com" class="inputBox2">
<p id="formSubheader">Phone</p>
<input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
<p id="formSubheader">Project Description</p>
<textarea name="description" class="inputBox4"></textarea>
<br>
<button type="submit" id="myButton2">Submit</button>
</div>
</div>
<div id="myModal2" class="modal2">
<div class="modal2-content">
<span id="close">×</span>
<p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
</div>
</div>
<script>
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal2");
var btn = document.getElementById("myButton");
var btn2 = document.getElementById("myButton2");
var close = document.getElementById("close");
btn.onclick = function() {
modal.style.display = "block";
}
btn2.onclick = function() {
modal.style.display = "none";
modal2.style.display = "block";
}
close.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
modal2.style.display = "none";
}
}
</script>
</body>
</html>
This has been a nightmare for me. I can not figure out how to simply change the form code that pops up after 5 seconds. When I do change it, the colors, the fonts everything changes on me. I've tried changing 1 thing at time and at one point I got close but I couldn't change the color of the button and in the explore browser the format was all out of wack... If any one can help me, that would be amazing!
original code
$(document).ready(function ()
(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
.instructions {
text-align:center;
font-size:20px;
margin: 15vh;
}
/* //////////////////////////////////////////////////////////////////////////////////////////////
// Default Modal Styles //
////////////////////////////////////////////////////////////////////////////////////////////// */
/* This is the background overlay */
.backgroundOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .85;
filter: alpha(opacity=85);
-moz-opacity: .85;
z-index: 101;
display: none;
}
/* This is the Popup Window */
.delayedPopupWindow {
display: none;
position: fixed;
width: auto;
max-width: 480px;
height: 310px;
top: 50%;
left: 50%;
margin-left: -260px;
margin-top: -180px;
background-color: #efefef;
border: 2px solid #333;
z-index: 102;
padding: 10px 20px;
}
/* This is the closing button */
#btnClose {
width:100%;
display: block;
text-align: right;
text-decoration: none;
color: #BCBCBC;
}
/* This is the closing button hover state */
#btnClose:hover {
color: #c90c12;
}
/* This is the description headline and paragraph for the form */
#delayedPopup > div.formDescription {
float: left;
display: block;
width: 44%;
padding: 1% 3%;
font-size: 18px;
color: #666;
clear: left;
}
/* This is the styling for the form's headline */
#delayedPopup > div.formDescription h2 {
color: #444444;
font-size: 36px;
line-height: 40px;
}
/*
////////// MailChimp Signup Form //////////////////////////////
*/
/* This is the signup form body */
#delayedPopup #mc_embed_signup {
float: left;
width: 47%;
padding: 1%;
display: block;
font-size: 16px;
color: #666;
margin-left: 1%;
}
/* This is the styling for the signup form inputs */
#delayedPopup #mc-embedded-subscribe-form input {
width: 95%;
height: 30px;
font-size: 18px;
padding: 3px;
margin-bottom: 5px;
}
/* This is the styling for the signup form inputs when they are being hovered with the mouse */
#delayedPopup #mc-embedded-subscribe-form input:hover {
border:solid 2px #40c348;
box-shadow: 0 1px 3px #AAAAAA;
}
/* This is the styling for the signup form inputs when they are focused */
#delayedPopup #mc-embedded-subscribe-form input:focus {
border:solid 2px #40c348;
box-shadow: none;
}
/* This is the styling for the signup form submit button */
#delayedPopup #mc-embedded-subscribe {
width: 100%!important;
height: 40px!important;
margin: 10px auto 0 auto;
background: #5D9E62;
border: none;
color: #fff;
}
/* This is the styling for the signup form submit button hover state */
#delayedPopup #mc-embedded-subscribe:hover {
background: #40c348;
color: #fff;
box-shadow:none!important;
cursor: pointer;
}
<div class="instructions">Wait for 5 seconds</div>
<div id="bkgOverlay" class="backgroundOverlay"></div>
<div id="delayedPopup" class="delayedPopupWindow">
<!-- This is the close button -->
[ X ]
<!-- This is the left side of the popup for the description -->
<div class="formDescription">
<h2>Sign Up and <span style="color: #40c348; font-weight: bold;">Save $25!</span></h2>
<p>Sign up for our Deal Alerts and save
$25 Off of your first order of $50 or more!</p>
</div>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
<div class="mc-field-group">
<label for="mce-FNAME">First Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name
<span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address
<span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_2aabb98e55b83ba9d3bd551f5_e6c08b53b4" value="">
</div>
<div class="clear">
<input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div>
THIS IS THE CODE I WOULD LIKE TO CHANGE THE FORM TO -
<button type="button" button-data-id="1" id="lead_button_form" div class="form_box" >
Enter A Valid Name and Email
<form class="form-horizontal validate formdetails show" name="optin" id="optin" form action="" accept-charset="utf-8" method="post">
<!-- Name -->
<input type="text" name="name" placeholder="Name" /><br/>
<!-- Email field (required) -->
<input type="text" name="email" placeholder="Email" /><br/>
<!-- Campaign token -->
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="G" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://reviewtheinside.com/Easy-eCash-Review-and-Bonuses.htm"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="" />
<!-- Subscriber button -->
<input type="submit" button type="button" button-data-id="1" id="lead_button" value="SUBMIT"/>
<div class="clearfix"></div>
<div class="mbr-row">
<div class="inner-addon right-addon"><p id="smtp-error"></p></div>
</div>
</form>
are you sure you are calling the function properly
(function ()
{
//Fade in delay for the background overlay (control timing here)
$("#bkgOverlay").delay(4800).fadeIn(400);
//Fade in delay for the popup (control timing here)
$("#delayedPopup").delay(5000).fadeIn(400);
//Hide dialouge and background when the user clicks the close button
$("#btnClose").click(function (e)
{
HideDialog();
e.preventDefault();
});
})(); //call the function
//Controls how the modal popup is closed with the close button
function HideDialog()
{
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
I'm a JS rookie, so be patient with me. I just created a js popup using this code https://www.w3schools.com/howto/howto_js_popup.asp and now I am attempting to add a simple close button to the top right corner to direct users to. I looked at some of the other close button threads and none of them seemed like they would integrate into my js code.
i Well searched "js close button" on the site which brought up several threads but none of them seemed to have an easy addition to the js script (Im assuming thats where the code should go). Again. Newbie.
Add a css class and simply display and hide it on button click
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
// 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;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: lightBlue;
background-color: grey;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
}
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {padding: 2px 16px;}
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<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>
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