We Keep Coding

Age Verification Popup: Set cookie to remember decision - javascript

I am using the following code to display an age verification popup on a cigarette website:
$(function() {
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
// Popup Age Verification
$(function() {
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});
});
#popup {
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
}
.verify-window {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
margin-left: -150px;
margin-top: -100px;
overflow: hidden;
border-radius: 10px;
padding: 20px;
background-color: #fff;
box-sizing: border-box;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.verify-window img {
display: block;
width: 250px;
height: 50px;
margin: 0 auto;
padding: 20px;
}
.verify-window h3 {
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #4d4d4d;
line-height: 1.7;
margin-top: 10px;
text-align: center;
}
.verify-window p {
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #4d4d4d;
margin-top: 10px;
line-height: 1.7;
text-align: center;
}
.button-yes,
.button-no {
background: #fff;
color: #ADCC21;
width: 20%;
margin-top: 10px;
border: 2px solid #ADCC21;
padding: 12px 17px;
border-radius: 30px;
font-family: 'Roboto', sans-serif;
text-align: center;
font-size: 1em;
}
.button-no {
float: right;
margin-right: 20px;
border: 2px solid #95969a;
color: #95969a;
display: block;
}
.button-yes {
float: left;
margin-left: 20px;
}
.button-yes:hover {
background: #ADCC21;
color: #fff;
transition: all 0.2s ease;
cursor: pointer;
}
.button-no:hover {
background: #95969a;
color: #fff;
transition: all 0.2s ease;
cursor: pointer;
}
<div id="popup" data-popup="popup-1">
<div class="verify-window">
<h3>Age Verification</h3>
<p>Are you at least 18 years old?</p>
<div class="button-yes" data-popup-close="popup-1">
Yes
</div>
<a href="https://www.google.com" target="_parent">
<div class="button-no">
No
</div>
</a>
</div><!-- // verify window -->
</div>
<div id="content">
<p>Page Content</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
(Code source: jsfiddle.net)
I want to implement a cookie that remembers when the user clicks on the .button-yes button. The other button shouldn't have a feature like this. How can I realize it the best way?

Following implementation uses a cookie to store and retrieve the state of the age agreement. You should add a condition in JavaScript to identify the agreement state when the application starts. Also hide the popup by default using css.
CSS
#popup {
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: none;
background-color: rgba(0, 0, 0, 0.8);
}
JavaScript using Cookies
$(function() {
//Check it the user has been accpeted the agreement
if (!(document.cookie && document.cookie == "accepted")) {
$("#popup").show();
}
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
//Set a cookie to remember the state
document.cookie = "accepted";
e.preventDefault();
});
});
JavaScript using localStorage
// Popup Age Verification
$(function() {
//Check it the user has been accpeted the agreement
if (!localStorage.getItem('accepted')) {
$("#popup").show();
}
$('[data-popup-close]').on('click', function(e) {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
//Set a cookie to remember the state
localStorage.setItem('accepted', true);
e.preventDefault();
});
});

Related

https://gyazo.com/aa49eb6d6849b3adabb8924aa9e40594
I have the elements in the diagram and I want to let the user choose in which element they are going to add the semi column to add text, but I dont know how to let them select a element and then add according to that selection.
var addDetail = document.getElementById('addDetail');
var clauseInput = document.getElementsByClassName('clause');
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target == clauseInput[0] || target == clauseInput[1] ||
target == clauseInput[2] || target == clauseInput[3] ||
target == clauseInput[4] || target == addDetail) {
document.getElementById('addDetail').style.display='inline-block';
// createDetail();
console.log(target);
} else {
document.getElementById('addDetail').style.display='none';
}
}, false);

Update
Instead of searching through all clause elements every time when addDetail been clicked, there is e.relatedTarget that really suitable to your problem, detailed documentation, and the update snippet :
/*CREATE TOP AND BOTTOM CLAUSES*/
/*Top Clauses*/
const addClauseTop = document.querySelector('#addClauseTop');
var targetClauseElement;
var addDetail = document.getElementById('addDetail');
addDetail.addEventListener('focusin', function(e) {
createDetail(e.relatedTarget);
});
window.addEventListener('mouseup',function(e) {
if ( e.currentTarget != addDetail ) {
addDetail.style.display='none';
}
});
var firstTopClause = document.getElementsByClassName('clause')[0];
firstTopClause.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
var firstBottomClause = document.getElementsByClassName('clauseDivReverse')[0];
firstBottomClause.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
addClauseTop.addEventListener('click',function(e){
e.preventDefault();
//Get Divs-Overlay
const topDivs = document.querySelector('#topClauses');
const bottomDivs = document.querySelector('#bottomClauses');
// Create Elements
const clauseDiv = document.createElement('div');
const clauseText = document.createElement('input');
const clauseStroke = document.createElement('div');
// // //Give Style
clauseDiv.classList.add('clauseDiv');
clauseDiv.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
clauseText.classList.add('clause');
clauseText.setAttribute("id", "clause");
clauseStroke.classList.add('strokeClause');
//
// // Append to document
clauseDiv.appendChild(clauseText);
clauseDiv.appendChild(clauseStroke);
topDivs.appendChild(clauseDiv);
document.body.appendChild(topDivs);
document.body.appendChild(bottomDivs);
})
/*BOTTOM Clauses*/
const addClauseBottom = document.querySelector('#addClauseBottom');
addClauseBottom.addEventListener('click',function(e){
e.preventDefault();
//Get Divs-Overlay
const topDivs = document.querySelector('#topClauses');
const bottomDivs = document.querySelector('#bottomClauses');
// Create Elements
const clauseDiv = document.createElement('div');
clauseDiv.addEventListener('click', function(e) {
targetClauseElement = e.currentTarget;
addDetail.style.display='inline-block';
});
const clauseText = document.createElement('input');
const clauseStroke = document.createElement('div');
// // //Give Style
clauseDiv.classList.add('clauseDivReverse');
clauseText.classList.add('clauseReverse');
clauseText.setAttribute("id", "clauseReverse");
clauseStroke.classList.add('strokeClauseReverse');
//
// // Append to document
clauseDiv.appendChild(clauseText);
clauseDiv.appendChild(clauseStroke);
bottomDivs.appendChild(clauseDiv);
document.body.appendChild(bottomDivs);
})
/***********/
//Create a addDetail
function createDetail(target){
var mainColumn = target.parentElement;
var strokeColumn = mainColumn.children[1];
// Create Elements
var levelOneDiv = document.createElement('div');
var levelOneText = document.createElement('input');
if ( mainColumn.classList.contains('clauseDiv') ) {
levelOneDiv.classList.add('levelOneClauseReverse');
levelOneText.classList.add('levelOneTextReverse');
//I thought you have not completed your style yet, like something levelOneClause class
} else {
levelOneDiv.classList.add('levelOneClauseReverse');
levelOneText.classList.add('levelOneTextReverse');
}
levelOneDiv.appendChild(levelOneText);
strokeColumn.appendChild(levelOneDiv);
}
#import url('https://fonts.googleapis.com/css?family=Vollkorn+SC');
body{
margin: 10%;
margin-right: 15%;
margin-left: 10%;
margin-top: 5%;
}
h1{
color: #3B3C3D;
font-family: 'Vollkorn SC', serif;
font-size: 2em;
text-align:center;
}
h2{
color: #3B3C3D;
font-family: 'Vollkorn SC', serif;
font-size: 1.5em;
text-align:center;
}
#bottomClauses{
clear: both;
float: right;
}
/*CONTROL-PANEL*/
#controlPanel{
float: inline-block;
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 15%;
padding-bottom: 2%;
border-radius: 10%;
border-bottom: 0.1vw solid #3B3C3D;
}
.addClause{
background-color: #2c3e50;
margin-top: 5%;
font-size: 0.75em;
padding: 0.5em;
border: 0;
color: #FFF;
}
.addClause:hover{
cursor: pointer;
background-color: #000;
}
.addDetail{
display: none;
background-color: #2c3e50;
margin-top: 5%;
font-size: 0.75em;
padding: 0.5em;
border: 0;
color: #FFF;
}
.addDetail:hover{
cursor: pointer;
background-color: #000;
}
/*FISHBONE*/
#fishBone{
position: relative;
float:right;
top: 19.75vw;
width: 100%;
height: 0.2vw;
background-color: #34495e;
}
#finalResult{
position: absolute;
/*float:right;*/
left: 83.5vw;
top: 44.25vw;
width: 7.5vw;
height: 7.5vw;
padding: 1vw;
text-align: center;
color: #FFF;
background-color: #7f8c8d;
border-radius: 50%;
border: 0.15vw solid #34495e;
}
/*NEW CLAUSE*/
.clauseDiv{
display: inline-block;
float:right;
width: 5vw;
margin-right: 12.5vw;
}
.clause{
float: inline-block;
position: relative;
top: -3.5vw;
right: 2vw;
text-align: center;
width: 5.8vw;
height: 1.5vw;
padding: 0.2vw;
color: #FFF;
background-color: #3498db;
border-radius: 0.15vw;
border: 0;
}
.strokeClause{
position: relative;
top: -5.75vw;
transform: rotate(-25deg);
background-color: #34495e;
width: 0.1vw;
height: 25vw;
margin-left: 7.5vw;
border: 0.05vw solid #34495e;
border-radius: 0.1vw;
float: inline-block;
z-index: -1;
}
/*NEW CLAUSE REVERSE*/
.clauseDivReverse{
float: inline-block;
float:right;
width: 5vw;
margin-right: 12.5vw;
}
.clauseReverse{
position: relative;
top: 15.5vw;
right: 2.5vw;
float: inline-block;
text-align: center;
width: 5.8vw;
height: 1.5vw;
padding: 0.2vw;
color: #FFF;
background-color: #3498db;
border-radius: 0.15vw;
border: 0;
}
.strokeClauseReverse{
position: relative;
top: -9.75vw;
transform: rotate(25deg);
background-color: #34495e;
width: 0.1vw;
height: 25vw;
margin-left: 7.5vw;
border: 0.05vw solid #34495e;
border-radius: 0.1vw;
float: inline-block;
z-index: -1;
}
/*NEW LEVEL ONE*/
.levelOneClauseReverse{
margin-bottom: 5vw;
}
.levelOneTextReverse{
border: 0;
position: relative;
font-size: 0.75vw;
width: 13vw;
top: 4.5vw;
right: 12.75vw;
border-bottom: 0.1vw solid #34495e;
transform: rotate(-25deg);
}
<body>
<h1>Diagram Editor</h1>
<div id='controlPanel'>
<h2>Control Panel</h2>
<input type='submit' name='addClause' value='Clause on TOP' class='addClause' id='addClauseTop'>
<input type='submit' name='addClause' value='Clause on BOTTOM' class='addClause' id='addClauseBottom'>
<input type='submit' name='addClause' value='Add Detail' class='addDetail' id='addDetail'>
</div>
<div id='fishBone'></div>
<input type='text' name='clause' id='finalResult'>
<div id='topClauses'>
<div class='clauseDiv'>
<input class='clause' id='clause'>
<div class='strokeClause'>
</div>
</div>
</div>
<div id='bottomClauses'>
<div class='clauseDivReverse' >
<input class='clauseReverse clause'>
<div class='strokeClauseReverse'>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>

I have a page that I need to convert to rtl.
The active tab & tab arrow position doesn't match.
I need to change the tab arrow position from TAB 1 to TAB 2 and vice versa.
I already changed some js value but in vain
HTML :
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS :
body {
direction:rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0,-12px,0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] { display: none; }
.search-type label {
background-color: #fff;
color: #333;
cursor: pointer;
display:inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
float: right;
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
right: 0;
transform: translate3d(-3px,0,0);
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
.main-search-box.no-shadow {
box-shadow: none;
padding: 0;
margin: 0;
}
.search-container .main-search-input input {
font-weight: 500;
font-size: 17px;
height: 57px !important;
float: right;
box-sizing: border-box;
border: none;
float: right;
height: auto;
}
.search-container .main-search-input button.button {
width: initial;
min-width: 100px;
max-width: 100px;
margin: 0;
font-size: 18px;
position: relative;
margin-right: 20px;
flex: 0 auto;
height: 57px;
}
.search-container .main-search-input button.button i {
position: relative;
right: 2px;
}
JS :
(function($){
"use strict";
$(document).ready(function(){
function searchTypeButtons() {
// Radio attr reset
$('.search-type label.active input[type="radio"]').prop('checked',true);
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css('right', arrowDist + (buttonWidth/2) );
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
'right': arrowDist + (buttonWidth/2),
'transition':'right 0.4s cubic-bezier(.87,-.41,.19,1.44)'
});
});
}
// Init
if ($(".main-search-form").length){
searchTypeButtons();
$(window).on('load resize', function() { searchTypeButtons(); });
}
// ------------------ End Document ------------------ //
});
})(this.jQuery);
I'm using bootstrap, bootstrap rtl flipped & jquery 2.2.0 as external ressources.
Here's the snippet:
https://jsfiddle.net/s3hy37nd/5/
Can someone help with that?

So many errors... I can only say I tried to comment them all inside the code so... yeah it's all there:
"use strict";
jQuery(function($) { // DOM ready and $ alias secured
// Radio attr reset (on DOM ready... makes sense?)
$('.search-type label.active input[type="radio"]').prop('checked', true);
function repositionArrow() { // Use a meaningful fn name
// Positioning indicator arrow
// Width? No. You need .outerWidth! you have paddings!!
var buttonWidth = $('.search-type label.active').outerWidth();
// Again use meaningful names
// If you do console.log( $('.search-type label.active').position() );
// you'll see no `.right` property. So yeah, use .left
var posLeft = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
left: posLeft + (buttonWidth / 2)
// No need for transition here - move it to Stylesheet instead
});
}
// Init
if ($(".main-search-form").length) {
// You might want this too inside the "if"
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
repositionArrow(); // Now you have such function
});
repositionArrow();
$(window).on('load resize', repositionArrow);
}
});
body {
direction: rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0, -12px, 0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] {
display: none;
}
.search-type label {
position: relative;
/* YOU NEED SOME POSITION! */
background-color: #fff;
color: #333;
cursor: pointer;
display: inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
/*float: right; WHY? you use rtl already */
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
/*right: 0; ...Nope. See JS, we need left */
left: calc(100% - 30px);
/* calc to the rescue */
/*transform: translate3d(-3px,0,0); but why */
transition: left 0.4s cubic-bezier(.87, -.41, .19, 1.44);
/* Moved from JS */
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
<div class="parallax-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TAB 1</label>
<label><input name="tab" type="radio">TAB 2</label>
<label><input name="tab" type="radio">TAB 3</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Updated jsFiddle

I'm working on a pop up modal and when I click a button I add a class changes the display property from 'none' to 'block'. It worked fine at first then I appended some HTML to the body via JS and since then it hasn't worked.
// Open modal
function openModal(clicked_id) {
var button = document.getElementById(clicked_id);
var modal = button.getAttribute("data-modal");
var modalElement = document.getElementById(modal);
document.body.innerHTML += "<div id='modal-backdrop' class='modal-backdrop'></div>";
var backdrop = document.getElementById("modal-backdrop");
backdrop.className += " modal-open";
modalElement.className += " modal-open";
// Close Same Modal Event Handlers
(function() {
document.getElementById("modal-close").onclick = function(e) {
closeModal(modalElement, backdrop);
}
document.getElementById("close").onclick = function(e) {
closeModal(modalElement, backdrop);
}
document.getElementById("modal-backdrop").onclick = function(e) {
closeModal(modalElement, backdrop);
}
})();
}
From debuggin I can see that element is being selected and the class name is added to the class list, but this isn't reflected on the computed HTML. I tried moving the line:
modalElement.className += " modal-open";
above the line:
document.body.innerHTML += "<div id='modal-backdrop' class='modal-backdrop'></div>";
But then the close functions stopped working. There's no errors in the console and the debugger runs the code as if it worked so I'm stumped. I have a code pen that shows everything bought together: http://codepen.io/WebDevelopWolf/pen/XMZdBg

Instead of using += (or string concatenation) for appending to the body, use document.createElement() and body.appendChild(element) to append the new element to the body. This small change will get your modal working again.
// Open modal
function openModal(clicked_id) {
var button = document.getElementById(clicked_id);
var modal = button.getAttribute("data-modal");
var modalElement = document.getElementById(modal);
var backdrop = document.createElement('div');
backdrop.id="modal-backdrop";
backdrop.classList.add("modal-backdrop");
document.body.appendChild(backdrop);
backdrop.classList.add("modal-open");
modalElement.classList.add("modal-open");
// Close Same Modal Event Handlers
(function() {
document.getElementById("modal-close").onclick = function(e) {
closeModal(modalElement, backdrop);
}
document.getElementById("close").onclick = function(e) {
closeModal(modalElement, backdrop);
}
backdrop.onclick = function(e) {
closeModal(modalElement, backdrop);
}
})();
}
// Close Modal
function closeModal(modalElement, backdrop) {
modalElement.className = modalElement.className.replace(/\bmodal-open\b/, '');
backdrop.className = backdrop.className.replace(/\bmodal-open\b/, '');
}
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
background: #0881a3;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #666;
position: relative;
overflow: hidden;
}
#heading {
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
color: #e1e1e1;
text-transform: uppercase;
}
h3 {
text-transform: none;
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
font-size: 13px;
}
#trigger {
width: 50%;
margin: 0 auto;
margin-top: 35px;
text-align: center;
}
.modal {
color: #1f4e5f;
background: #a4e5d9;
width: 40%;
margin: 50px auto;
border-radius: 5px;
text-align: left;
-webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
z-index: 1050;
position: fixed;
top: 0;
right: 0;
left: 0;
transition: opacity .15s linear;
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
opacity: 1;
display: none;
}
small {
text-align: center;
color: #FFF;
}
.modal-body,
.modal-footer,
.modal-heading {
padding: 25px 20px;
}
.modal-heading {
border-bottom: 1px solid #c8f4de;
}
.modal-heading h2 {
margin: 0;
}
.modal-heading h2 i {
margin-right: 10px;
}
.modal-heading .close {
position: absolute;
right: 20px;
top: 17px;
font-size: 28px;
}
.modal-heading .close:hover {
cursor: pointer;
}
.modal-footer {
border-top: 1px solid #c8f4de;
position: relative;
bottom: 0;
}
.modal-footer button,
#trigger button {
width: 100%;
font-size: 16px;
padding: 10px;
display: block;
background-color: #649dad;
border: 1px solid transparent;
color: #ffffff;
font-weight: bold;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#trigger button {
width: auto;
margin: 0px auto;
}
.modal-footer button:hover,
#trigger button:hover {
background-color: #ffffff;
color: #009ac9;
border-color: #009ac9;
cursor: pointer;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: .5;
z-index: 0;
display: none;
}
.modal-open {
display: block;
}
<script src="https://use.fontawesome.com/f79e01ac29.js"></script>
<div id="heading">
<h1><i class="fa fa-paw"></i> Akela - The Pure JS Pop-up</h1>
<h3>A lightweight modal pop-up with no framework dependancy that's mobile friendly.</h3>
</div>
<!--Modal Trigger-->
<div id="trigger">
<button id="staticbtn" data-modal="static" onClick="openModal(this.id)" class="btn btn-info">Show Static Modal</button><br />
<small><i class="fa fa-star"></i> Made with the help of Font Awesome <i class="fa fa-star"></i></small>
</div>
<!--Static Modal-->
<div id="static" class="modal" tabindex="-1" role="dialog">
<div class="modal-content">
<div class="modal-heading">
<h2><i class="fa fa-paw"></i> Hello World</h2>
<div class="close"><i id="close" class="fa fa-close"></i></div>
</div>
<div class="modal-body">
I'm a pop up!
</div>
<div id="modalFooter" class="modal-footer">
<button id="modal-close" type="button" class="btn btn-info">Close</button>
</div>
</div>
</div>

I have a Login Popup that has a form in it. The problem is that the form is doing nothing on submit. Why is this? I've tried moving around the form elements, but nothing is working. Am I misunderstanding some part of input? The action is hi on purpose, so I would go to a completely different page. But nothing happens...
/***********************\
Modal Module - Title CSS FTW
\***********************/
body {
padding: 0;
margin: 0;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #353535;
}
#login_nav_div, #signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login, #signup {
position: relative;
top: -1px;
left: 9px;
}
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#login_username, #login_password {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
}
#login_username:focus, #login_password:focus {
border: 1px solid #4096ee;
}
#login_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee; /* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 19px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus, #login_submit:hover {
background: rgb(37,141,200);
}
/* End of Model */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
</head>
<body>
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span> <br>
<form action='hi' method='post'>
<input id='login_username' placeholder='Username' name='login_username'> <br> <br>
<input id='login_password' placeholder='Password' name='login_password' type='password'> <br> <br>
<input type='submit' value='Login' id='login_submit'>
</form>
<span class="close"></div>
</div>
</div>
<!-- nav -->
<div id='nav'>
<span id='nav_logo'> Logo </span>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#' class='model_link2'> <div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div> </a>
<!-- End of Sign Up -->
<!-- Login -->
<a href="#Popup" class="button"> <div id='login_nav_div'>
<span id='login'> Login </span>
</div> </a>
<!-- End of Login -->
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $("a[href=" + this.selector + "]");
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.add($modal.find(".close")).on("click", function(e) {
e.preventDefault();
// if it isn't the background or close button, bail
if (e.target !== this)
return;
$modal.trigger("expose:close");
});
return;
}
$("#Popup").expose();
// Example Cancel Button
$(".cancel").on("click", function(e) {
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
</script>
</body>
EDIT #Arun P Johny
This is what my code now looks like:
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
$modal.add($modal.find(".close")).on("click", function(e) {
e.preventDefault();
// if it isn't the background or close button, bail
if (e.target !== this)
return;
$modal.trigger("expose:close");
});
return;
}
$("#Popup").expose();
// Example Cancel Button
$(".cancel").on("click", function(e) {
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
</script>
Is this right?

There are 2 issues in your code
The selector used for $trigger is throwing an error - You have VM736 jquery.js:1502 Uncaught Error: Syntax error, unrecognized expression: a[href=#Popup] in your console
$trigger = $('a[href="' + this.selector + '"]')
Also the click handler for $model and close button is preventing the default action of the submit button click event
$modal.on("click", function(e) { //instead of $modal.add($modal.find(".close")).on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
Demo: Fiddle

I have a simple progress bar for my <audio> element and I want to make it so the knob is draggable, so I decided to try the jquery UI .draggable method, but it does not work on my knob. All it does is prevent my knob from appearing when you hover over the player as if the code beneath is invalid as soon as that code is in there.
I've tried this for hours and cannot figure out what's wrong with my code. You can see the player below here: I've included a test audio file also so you can see it in action. (The knob is supposed to fade in when you hover over the player, but doesn't after the draggable method. Something is making it invalid, if you wish to see the knob, simply remove the code marked /** This does not work /** )
/**
VARIABLES
**/
/** Elements **/
var player = $("#player");
var playerE = $("#player")[0];
var playerE = $("#player").get(0);
var playbutton = $("#playButton");
var scrubber = $(".scrubber");
var progress = $(".progress");
var buffered = $(".buffered");
var knob = $(".knob");
/** Variables **/
var isPlaying = 0;
var buffered = 0;
var progress = 0;
/**
CONTROLS
**/
/** Scrubber and Time **/
playerE.ontimeupdate = function () {
audioTimeUpdater();
};
function audioTimeUpdater() {
var progress = playerE.currentTime / playerE.duration;
var buffered = playerE.buffered.end(0) / playerE.duration;
$(".progress").width((progress * 100) + "%");
$(".buffered").width((buffered * 100) + "%");
}
/** This does not work **/
$("#.knob").draggable({
axis: "x"
});
/** This also stops working after the above code, if I remove it, it works. **/
$(".player-small").mouseenter(function () {
$(".knob").stop().fadeIn(200);
});
setTimeout(function () {
$(".player-small").mouseleave(function () {
$(".knob").stop().fadeOut(200);
});
}, 3000);
/**
EVENT HANDLERS
**/
/**
FUNCTIONS
**/
function play(file, title) {
playbutton.removeClass("playFailed");
var filename = "/music/" + file;
player.attr("src", filename).trigger("play");
playerHasError();
if (playerIsToggled === 0) {
playerToggle();
}
}
function playerHasError() {
$("#player").on("error", function (e) {
source = $("#player").attr('src');
pushModal("We can't play that!", "Audio element error.", ("An error occured and " + source + " cannot be played. If this is an error that persists please contact the website administrator."), "Audio element returned error trying to play source.", 1);
playbutton.addClass("playFailed");
});
}
button {
border: none;
outline: none;
}
body,
nav,
ul,
li,
a {
padding: 0;
margin: 0;
list-style: none;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
body {
overflow-y: scroll;
}
::selection {
background: rgba(255, 64, 129, 0.85);
color: black;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: rgba(255, 64, 129, 0.85);
color: black;
}
.player-small {
height: 55px;
width: 100%;
background: #ff4081;
}
.player-height-anim {}
.player-small .left {
height: 55px;
float: left;
width: 60%;
}
.player-small .right {
height: 55px;
float: right;
width: 40%;
}
.transport {
overflow: auto;
}
.play-button-con {
height: 55px;
width: 55px;
float: left;
}
.play {
padding-top: 3px;
width: 55px;
height: 55px;
font-size: 18px;
padding-right: 4px;
text-align: center;
}
.playFailed {
color: rgba(255, 255, 255, 0.17)!important;
pointer-events: none;
}
.next-button-con {
height: 55px;
width: 55px;
float: left;
}
.next {
padding-top: 2px;
padding-right: 8px;
width: 55px;
height: 55px;
text-align: center;
letter-spacing: -3px;
font-size: 11px;
padding-bottom: 2px
}
.scrubber-con {
float: left;
height: 55px;
width: calc(100% - 111px);
}
.scrubber {
width: calc(100% - 40px);
margin: auto;
margin-top: 25px;
height: 5px;
background: rgba(0, 0, 0, .04);
cursor: pointer;
}
.scrubber .knob {
float: right;
height: 13px;
width: 13px;
position: relative;
bottom: 4px;
left: 5px;
background: white;
border-radius: 50px;
display: none;
}
.scrubber .knob:hover {
cursor: grab;
}
.scrubber .knob:active {
cursor: grabbing;
}
.scrubber .progress {
height: 100%;
float: left;
background: white;
width: 0%;
position: relative;
z-index: 1;
transition: ease 300ms;
}
.scrubber .buffered {
height: 5px;
position: relative;
width: 0%;
background: rgba(0, 0, 0, .09);
transition: ease 1000ms;
}
.player-small button {
color: white;
float: left;
background: rgba(0, 0, 0, .04);
cursor: pointer;
}
.player-small button:hover {
background: rgba(0, 0, 0, .12);
}
<script type="text/javascript " src="http://code.jquery.com/jquery-latest.min.js "></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="player-small">
<div class="w-ctrl">
<div class="controls">
<div class="left">
<div class="transport">
<div class="play-button-con">
<button class="play" id="playButton">►</button>
</div>
<div class="next-button-con">
<button class="next">►► </button>
</div>
<div class="scrubber-con">
<div class="scrubber">
<div class="progress">
<div class="knob"></div>
</div>
<div class="buffered"></div>
</div>
</div>
</div>
</div>
<div class="right">
<audio id="player" src="http://c1d20c5c.ngrok.io/music/test.mp3" controls="controls" preload="none"></audio>
</div>
</div>
</div>
</div>
So as you see the knob doesn't even appear, and if you make it appear, it is still not draggable. I tested the lint and everything is OK and should be working, but it isn't. What am I doing wrong?

Your selector is wrong:
$("#.knob").draggable({...});
#.knob won't work, you can either select via an id using #idname or via a class using .classname.
In your html, knob is a class, so using
$(".knob").draggable({
axis: "x"
});
Should work, but be aware that this selects all html elements with the knob class.