I'm very new to Javascript. I have done one template for login, It is working like a charm. Here My question is how to set up the validation and navigation like if(username==root && password==root) then it should redirect into other page. I just post my code. I didn't include the css code. Then i did this code in html in that i have try to write the javascript but i don't know how to handle this.
My code:
<!DOCTYPE html>
<html>
<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: #0077B5;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* 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: 10px 0 5px 0;
position: relative;
}
img.cisco{
width: 30%;
border-radius: 30%;
}
.container {
padding: 10px;
}
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: 5px;
}
/* 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 */
}
/* 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: 200px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
.Center {
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
<body>
<h2><text-align:center>Authentication Required</h2>
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" method="post" name="myform">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="../images/cisco1.png" alt="Cisco" class="cisco">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" id="username" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" id="password" placeholder="Enter Password" name="psw" required>
<button type="submit" id="login" onclick="validate()">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
<script>
var attempt = 3; //Variable to count number of attempts
//Below function Executes on click of login button
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "root" && password == "root"){
alert ("Login successfully");
console.log("Redirecting to welcome page...")
window.location = "success_new.html"; //redirecting to other page
return false;
}
else{
attempt --;//Decrementing by one
alert("You have left "+attempt+" attempt;");
}
//Disabling fields after 3 attempts
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
</script>
</body>
</html>
At last I fix it. The issue here was "return" function on the onclick listener. here is that one
add return before the validate function
<button type="submit" id="login" onclick=" return validate()">Login</button>
Then it's works fine.
var username = document.getElementById('uname');
var pwd = document.getElementById('psw');
document.getElementById("b").onclick = function(){
if(username.value == "root" && pwd.value == "root"){
console.log("Redirecting to welcome page...")
window.location = "welcome.html";
}
}
<h2 text-align:"center">Authentication Required</h2>
<button onclick="document.getElementById('id01').style.display='block';">Login</button>
<div id="id01" class="modal" style="display:none;">
<form class="modal-content animate" action="">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="../images/logo1.png" alt="Logo" class="logo1">
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" id="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
<button type="button" id="b">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
<script>
// 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";
}
}
</script>
Fixed it. If I were you, I'd go over these and look at each difference to see what went wrong. It should be noted that you shouldn't do client-side validation like this, because anyone can easily:
See the password and username
Go to the url directly
Etc.
You really should do this server-side.
Related
<html>
<script>
function passwordvalidation() #validate if password is strong and if botth passwords are equal
{
var x=document.forms["signup"]["psw"].value;
var y=document.form["signup"]["psw-repeat"].value;
var z=document.form["signup"]["email"].value;
alert(x);
if (x == ""||y==""||z=="") {
alert("form must be filled out");
return false;
}
else if(y!=x)
{
alert("password does not match");
return false;
}
else if (!(x.match(/[a-z]/g) && x.match(
/[A-Z]/g) && x.match(
/[0-9]/g) && x.match(
/[^a-zA-Z\d]/g) && x.length >= 8))
{
alert("weak password")
return false;
}
else
{
return true;
}
}
</script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
#media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
</style>
<body>
<form name="signup" action="/login" onsubmit="return passwordvalidation()" style="border:1px solid #ccc">
<div class="container">
<h1>Sign Up</h1>
<h6>Please fill in this form to create an account.</h6>
<p>Strong password must contain 8 characters </p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<div class="clearfix">
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</body>
</html>
You have several errors in these lines:
var x=document.forms["signup"]["psw"].value;
var y=document.form["signup"]["psw-repeat"].value;
var z=document.form["signup"]["email"].value;
You can use many methods to retrieve the inputs values, but this way is throwing errors. Check how to do it by using document.getElementBy*** or similar
It is calling the validation function, but you made a spelling mistake in second and third line. Correct
document.form --> document.forms document.form is undefined and your function is exiting with TypeError when you call document.form["signup"] without returning false, and thus your form is navigating to defined action
function passwordvalidation(form)
{
var x=form["psw"].value;
var y=form["psw-repeat"].value;
var z=form["email"].value;
if (x == ""||y==""||z=="") {
alert("form must be filled out");
console.log("form must be filled out");
return false;
}
else if(y!=x)
{
alert("password does not match");
return false;
}
else if (!(x.match(/[a-z]/g) && x.match(
/[A-Z]/g) && x.match(
/[0-9]/g) && x.match(
/[^a-zA-Z\d]/g) && x.length >= 8))
{
alert("weak password")
return false;
}
else
{
return true;
}
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
#media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
<form name="signup" action="/login" onsubmit="return passwordvalidation(this)" style="border:1px solid #ccc">
<div class="container">
<h1>Sign Up</h1>
<h6>Please fill in this form to create an account.</h6>
<p>Strong password must contain 8 characters </p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<div class="clearfix">
<button type="submit"class="signupbtn">Sign Up</button>
</div>
</div>
</form>
I would like to show a modal after 5 seconds, but only once per session (website visit).
This is what I have so far:
$(document).ready(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);
}
This is the codepen for it:
https://codepen.io/uxfed/pen/BmyeEr
I would like this modal to only show one time per website session.
You can put your fading code into body of if statement. I did it via localStorage tool. This code works for me:
$(function(){
console.log(window.localStorage);
var ip_s = localStorage.getItem('ip');
var d = new Date();
!ip_s ? use_local_storage(d) : console.log('not the first visit');
})
function use_local_storage(d) {
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
var iip = String(JSON.parse(JSON.stringify(data, null, 2)).ip);
localStorage.setItem('ip', iip);
localStorage.setItem('day_visit', d.toLocaleDateString());
console.log(window.localStorage);
// load your function here
// question_body();
});
}
Code in Snippet doesn't works here, but in your project it would.
function hideDialog(){
$("#bkgOverlay").fadeOut(400);
$("#delayedPopup").fadeOut(300);
}
function question_body(){
//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();
});
}
$(function(){
console.log(window.localStorage);
var ip_s = localStorage.getItem('ip');
var d = new Date();
!ip_s ? use_local_storage(d) : console.log('not the first visit');
})
function use_local_storage(d) {
$.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
var iip = String(JSON.parse(JSON.stringify(data, null, 2)).ip);
localStorage.setItem('ip', iip);
localStorage.setItem('day_visit', d.toLocaleDateString());
console.log(window.localStorage);
// load your function here
// question_body();
});
}
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
I'm trying to animate a modal with a transition. I'm just looking for open it slowly but i don't understand how it works...
The modal have to be open from the center of the screen or from the screen down side.
I found this code from google :
https://codepen.io/designcouch/pen/obvKxm
But it's really too complicated for me. I can't understand how adapt it with my code...
/*Ouvrir le popup stress */
// Get the modal
var hydricstressmodal = document.getElementById('hydricstressmodal');
// Get the button that opens the modal
var stress = document.getElementById("stress");
// Get the <span> element that closes the modal
var hydricstressspan = document.getElementsByClassName("stressclose")[0];
// When the user clicks the button, open the modal
stress.onclick = function() {
hydricstressmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
hydricstressspan.onclick = function() {
hydricstressmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == hydricstressmodal) {
hydricstressmodal.style.display = "none";
}
}
/*Ouvrir le popup vegetal */
// Get the modal
var vegetalmodal = document.getElementById('vegetalmodal');
// Get the button that opens the modal
var vegetal = document.getElementById("vegetal");
// Get the <span> element that closes the modal
var vegetalspan = document.getElementsByClassName("vegetalclose")[0];
// When the user clicks the button, open the modal
vegetal.onclick = function() {
vegetalmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
vegetalspan.onclick = function() {
vegetalmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vegetalmodal) {
vegetalmodal.style.display = "none";
}
}
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-size: 28px;
background-color: #00011f;
display: flex;
flex-direction: column;
margin : auto;
}
/*popup hydric stress*/
.hydricstressmodal {
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.7); /* Black w/ opacity */
}
/* stress Modal Content */
.stress-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popstress img{
width: 20%;
}
/* The Close Button */
.stressclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.stressclose:hover,
.stressclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*popup Vegetal*/
.vegetalmodal {
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.8); /* Black w/ opacity */
scale
}
/* stress Modal Content */
.vegetal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popvegetal img{
width: 40%;
}
/* The Close Button */
.vegetalclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.vegetalclose:hover,
.vegetalclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div id="content">
<h3>Electrophotonique Ingénierie : Nouvelle approche de l'imagerie macroscopique par effet de couronne dans le domaine de la santé et des biotechnologies.</h3>
<div id="file" action="" class = "container">
<input id = "stress" type="image" src="IMAGES/PNG/hydricstress.png" />
<div class = "text">
Stress hydrique
</div>
</div>
<!-- The hydric stress Modal -->
<div id="hydricstressmodal" class="hydricstressmodal">
<div class="stress-content">
<span class="stressclose">×</span>
<div class ="popstress" ><img src="images/png/hydricstress.png"></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<input id = "vegetal" type="image" src="IMAGES/PNG/vegetal.png" />
<div class = "text">
Biophotonique appliquée aux végétaux
</div>
</div>
</div>
<!-- The vegetal Modal -->
<div id="vegetalmodal" class="vegetalmodal">
<div class="vegetal-content">
<span class="vegetalclose">×</span>
<div class ="popvegetal" ><img src="images/png/vegetal.png" ></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<img src="IMAGES/PNG/pont.png" width="100%" />
<div class = "text">
Etudes des ponts photoniques
</div>
</div>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/button.js"></script>
A simple solution with css animations:
$('#open').click(function() {
$('#modalOverlay').show().addClass('modal-open');
});
$('#close').click(function() {
var elem = $('#modalOverlay');
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
#modalOverlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
}
#modal {
position:fixed;
width:60%;
top:55%;
left:50%;
padding:15px;
text-align:center;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 150ms ease-in-out;
}
#modalOverlay.modal-open #modal {
opacity:1;
top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open" type="button">View modal</button>
<div id="modalOverlay" style="display:none;">
<div id="modal">
<h1>My modal</h1>
<p>This is a simple modal</p>
<button id="close" type="button">Close</button>
</div>
</div>
If you don't want to spend too much time on this kind of feature you could use a library like https://sweetalert2.github.io/ which is very easy to use and do the job.
You can also use library like bootstrap. For bootstrap modal you can refer below link.
https://getbootstrap.com/docs/4.0/components/modal/
i have a view in which i have a popup modal which gets a search string and search for the details in the database.
the problem is that when i write my search string and press search button, the javascript is not triggered.
The following are my codes
<html>
<head>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.js"></script>
<script>
$(document).ready(function () {
$("#records_table").on("click", "tr", function () {
$(this).addClass('selected').siblings().removeClass('selected');
var usern = $(this).find('td:nth-child(1)').html();
var name = $(this).find('td:nth-child(2)').html();
var email = $(this).find('td:nth-child(3)').html();
var emails = $(this).find('td:nth-child(4)').html();
document.getElementById("1").value = usern;
document.getElementById("2").value = name;
document.getElementById("3").value = email;
document.getElementById("4").value = emails;
});
$('#openBtn').click(function (event) {
$(".rower").empty();
var search = $('#searchAttr').val();
if (search != '') {
$.getJSON('#Url.Content("~/DBTestAccPAcs/GetRecord")', { search: search }, function (FacilityData) {
$(function () {
for (var i = 0; i < FacilityData.DivID.length; i = i+4) {
$('<tr class="rower">').append(
$('<td>').text(FacilityData.DivID[i]),
$('<td>').text(FacilityData.DivID[i + 1]),
$('<td>').text(FacilityData.DivID[i + 2]),
$('<td>').text(FacilityData.DivID[i + 3])
).appendTo('#records_table');
}
});
});
}
});
});
</script>
<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 {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 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: 60px;
}
/* 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 */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
color: #000;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<input id="searchAttr" name="searchAttr" />
<button onclick="document.getElementById('id01').style.display='block'">Sign Up</button>
<input type="text" id="1" /><input type="text" id="2" /><input type="text" id="3" /><input type="text" id="4" />
<!-- Button to open the modal -->
<!-- The Modal (contains the Sign Up form) -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
#*<form class="modal-content animate" action="/action_page.php">*#
<div class="modal-content animate">
<div class="container">
<div class="my">
<input id="searchAttr" name="searchAttr" />
<button href="#myModal" id="openBtn" data-toggle="modal" class="btn btn-success">search</button>
</div>
<div id="result">
<div class="table-responsive" style="height:300px; overflow:auto;">
<table id="records_table" border='1' class="table table-bordered table-condensed table-hover table-responsive">
<thead>
<tr>
<th>Vendor Part Number</th>
<th>Description</th>
<th>Location Code</th>
<th>Quantity</th>
</tr>
</thead>
<tbody id="getrid"></tbody>
</table>
</div>
</div>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
any help will really be appreciated.
Thanks
The JS :
function modalf(id){
var modal = document.getElementById(id);
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
window.document.onkeydown = function (esc){
if (!esc) esc = event;
if (esc.keyCode == 27)
{
modal.style.display = "none";
}
}
}
The call :
modalf('register');
modalf('login');
The small part of html :
Button open modal :
<button onclick="document.getElementById('login').style.display='block'">Login</button>
modal:
<div id="login" class="modal">
<span>modal text</span>
</div>
The problem, that i have 2 modals, login and register, and i want to run my function each time i need it.
i created the Js function but when i tried to run it twice like :
modalf('register');
modalf('login');
only first one working, i tried to check if it work separatelyת and it's work perfectly.
Someone have best solution for this? maybe something good that i could use function for more than 2 modals... maybe 10 for future.
best regards,
Orr.
Check this.
There are some little differences between onclick and addEventListener.
Is this met your requirements?
modalf('register');
modalf('login');
function modalf(id){
var modal = document.getElementById(id);
var a=function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
window.addEventListener('click',a);
var b= function (esc){
if (!esc) esc = event;
if (esc.keyCode == 27)
{
modal.style.display = "none";
}
}
window.addEventListener("keyup",b);
}
/* 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 {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,.signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 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: 60px;
}
/* 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 */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
color: #000;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
#media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
span.psw {
display: block;
float: none;
}
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
<button onclick="document.getElementById('register').style.display='block'">Sign Up</button>
<!-- The Modal (contains the Sign Up form) -->
<div id="register" class="modal">
<span onclick="document.getElementById('register').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content animate" action="action_page.php">
<div class="container">
<label><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<input type="checkbox" checked="checked"> Remember me
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('register').style.display='none'" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</div>
</form>
</div>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('login').style.display='block'">Login</button>
<!-- The Modal -->
<div id="login" class="modal">
<span onclick="document.getElementById('login').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<!--<img src="img_avatar2.png" alt="Avatar" class="avatar">-->
</div>
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
</div>
<div class="clearfix container">
<button type="button" onclick="document.getElementById('login').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot password?</span>
</div>
</form>
</div>
Think this will help you.
After running snippet, allow 2-3 seconds for it to get compiled. Then only the clicks will work
function modalf(elem,id,id2){
var modal = document.getElementById(id);
var modal2 = document.getElementById(id2);
elem.addEventListener('click',function(){
modal.style.display="block";
modal2.style.display="none";});
window.document.onkeydown = function (esc){
if (!esc) esc = event;
if (esc.keyCode == 27)
{
modal.style.display = "none";
}
}
}
<button onclick="modalf(this,'login','register');">Login</button>
modal:
<div id="login" class="modal">
<span>LOGIN</span>
</div>
<br />
<button onclick="modalf(this,'register','login');">Register</button>
modal:
<div id="register" class="modal">
<span>REGISTER</span>
</div>