Close/Hide Modal - javascript

Close/Hide Modal - javascript

Im having a hard time how to close or hide my modal after filling it up.
Upon clicking submit i want it to go back to the page where the textbox is clickable. Once go back to the page, the checkbox i check should still checked when i open it again. Can anyone do it with javascript thing or any other solution.
I don't have time now to use bootstrap and my codes are below. i just want to hide my modal or close upon clicking submit. Help me please, thanks.
My working fiddle: https://jsfiddle.net/fe73awsu/
Please see my code below:
test.php
<form method="post" name="testform" action="#">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div> <!-- close modalcol1 -->
</div> <!-- close modalcontainer -->
<div class="overlay"></div>
</div> <!-- close modalwrapper -->
</form>
modal.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
Help me guys, please :( i need it badly now.

Calm down bro,
Check this jsfiddle link.
Add this js code,
$(document).on("click",".btn1", function(){
$('#modal').hide();
});
Why so serious ?

<button type="button" id="close"class="btn green btn-default" data-dismiss="modal">Close <i class="fa fa-times" aria-hidden="true"></i></button>
Add JavaScript
function onSave(){
$('#close').Click();
}

try this.
<button class="btn1" type="button" value="Submit" on-click= submit();>Submit</button>
// Script
function submit() {
window.history.back();
}

$(document).on("click",".btn1", function(){
$('#modal').hide();
});
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input readonly type="text" name="txt1" placeholder="inputTest">
</a>
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="1">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="2">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="3">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="4">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="5">
<div class="clear"></div>
<div class="savebutton">
<button class="btn1" type="button" value="Submit">Submit</button>
</div>
</div> <!-- close modalcol1 -->
</div> <!-- close modalcontainer -->
<div class="overlay"></div>
</div> <!-- close modalwrapper -->
</form>

Put this in file.
$('#modal_edit').modal('hide');
is hope help kubb.

Related

How to add check box using field-wrap tag in html?

I'm trying to add check using field-wrap tag, but space submit button and check box non-aligned. I have to two forms called sign up and login. Sign up form contains many fields like name, email, password, etc.. Tried in terms and condition using checkbox in sign up form, but alignment is messed up.
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #4F5459;
transition: .5s ease;
}
a:hover {
color: #71D72C;
}
.form .forgot p {
color: #4F5459;
}
.form {
background: #fff;
padding: 40px;
max-width: 500px;
margin: 30px auto;
border-radius: 4px;
/* box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); */
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
height: 50%;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #4F5459;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #71D72C;
color: #ffffff;
}
.tab-group .active a {
background: #71D72C;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4F5459;
font-weight: 300;
margin: 0 0 30px;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 14px;
color: #4F5459;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size: 14px;
}
label .req {
margin: 2px;
color: #4F5459;
}
label.active {
-webkit-transform: translateY(35px);
transform: translateY(35px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #4F5459;
font-size: 14px;
}
input, textarea {
font-size: 15px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: #E7E8E6;
background-image: none;
border: 1px solid #a0b3b0;
color: #4F5459;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #71D72C;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 20px;
font-weight: 300;
/* text-transform: uppercase; */
letter-spacing: .1em;
background: #71D72C;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #71D72C;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<!-- <h1>Sign Up for Free</h1> -->
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Business Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<h1 style="font-size:14px; text-align: left; font-weight: 600">Payment</h1>
<div class="field-wrap">
<label>
Name on Card<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Card Number<span class="req">*</span>
</label>
<input type="number"required autocomplete="off"/>
</div>
<div class="top-row">
<h1 style="font-size:14px; text-align: left; font-weight: 600">Expiration</h1>
<div class="field-wrap">
<label>
MM<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
YYYY<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
CVC<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label><input type="checkbox" />Option 1</label>
<!-- <input type="checkbox" required autocomplete="off" /> -->
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" required autocomplete="off"> -->
<!-- <label class="req form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="button button-block"/>Sign Up</button>
</form>
</div>
<div id="login">
<!-- <h1>Welcome Back!</h1> -->
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
From snippet can able to see check box and submit button are non aligned. How to add check box like above input field with correct space?

You have coded CSS for input, so for all input element, it will take width:100% & height:100% etc...
See the attached snippet
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #fff;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #4F5459;
transition: .5s ease;
}
a:hover {
color: #71D72C;
}
.form .forgot p {
color: #4F5459;
}
.form {
background: #fff;
padding: 40px;
max-width: 500px;
margin: 30px auto;
border-radius: 4px;
/* box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); */
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
height: 50%;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #4F5459;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #71D72C;
color: #ffffff;
}
.tab-group .active a {
background: #71D72C;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #4F5459;
font-weight: 300;
margin: 0 0 30px;
}
label {
/* position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 14px;
pointer-events: none;*/
color: #4F5459;
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
font-size: 14px;
}
label .req {
margin: 2px;
color: #4F5459;
}
label.active {
-webkit-transform: translateY(35px);
transform: translateY(35px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #4F5459;
font-size: 14px;
}
input, textarea {
font-size: 15px;
display: block;
width: 100%;
height: 100%;
padding: 5px 10px;
background: #E7E8E6;
background-image: none;
border: 1px solid #a0b3b0;
color: #4F5459;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
outline: 0;
border-color: #71D72C;
}
[type=checkbox], [type=radio] {
box-sizing: border-box;
padding: 0;
width: 20px;
height: 20px;
display: inline;
vertical-align: middle;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 0;
padding: 15px 0;
font-size: 20px;
font-weight: 300;
/* text-transform: uppercase; */
letter-spacing: .1em;
background: #71D72C;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover, .button:focus {
background: #71D72C;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<!-- <h1>Sign Up for Free</h1> -->
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label> First Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label> Last Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label> Email Address<span class="req">*</span> </label>
<input type="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Password<span class="req">*</span> </label>
<input type="password" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Business Name<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<h1 style="font-size:14px; text-align: left; font-weight: 600">Payment</h1>
<div class="field-wrap">
<label> Name on Card<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Card Number<span class="req">*</span> </label>
<input type="number" required autocomplete="off"/>
</div>
<div class="top-row">
<h1 style="font-size:14px; text-align: left; font-weight: 600">Expiration</h1>
<div class="field-wrap">
<label> MM<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> YYYY<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label> CVC<span class="req">*</span> </label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
<input type="checkbox" >
Option 1</label>
<!-- <input type="checkbox" required autocomplete="off" /> -->
<!-- <input type="checkbox" class="form-check-input" id="exampleCheck1" required autocomplete="off"> -->
<!-- <label class="req form-check-label" for="exampleCheck1">Check me out</label> -->
</div>
<button type="submit" class="button button-block">Sign Up</button>
</form>
</div>
<div id="login">
<!-- <h1>Welcome Back!</h1> -->
<form action="/" method="post">
<div class="field-wrap">
<label> Email Address<span class="req">*</span> </label>
<input type="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label> Password<span class="req">*</span> </label>
<input type="password" required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block">Log In</button>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->

How to stylize radio buttons in Bootstrap?

I am not allowed to use jquery. Only JavaScript, CSS and Bootstrap.
How do I change the default look of the radio buttons?
Here is my code so far.
"test.html"
<div class="radio">
<label><input type="radio" name="optradio" id="radA" onclick="storeA()">
<p id="optionA"></p><br>
</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="radB" onclick="storeB()">
<p id="optionB"></p><br>
</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="radC" onclick="storeC()">
<p id="optionC"></p><br></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="radD" onclick="storeD()">
<p id="optionD"></p><br></label>
</div>
<div class="radio">
<label><input type="radio" name="optradio" id="radE" onclick="storeE()">
<p id="optionE"></p><br></label>
</div>

The main point to keep in mind:
Hide radios
Generate new radio buttons, which we can style via css via pseudo elements :after or before
Apply styles when checking the button with pseudo selector :checked
/* Using css var aka custom properies, don't use them if you don't use tools such as postCss */
:root {
--color-blue: #5897fc;
--color-blue-grayed: #e0ecff;
}
/* First hide radios */
.questions input[type="radio"] {
display: none;
}
/* Generate new radio buttons, which we can style via css */
.questions label:before {
content: attr(data-question-number);
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid;
text-align: center;
line-height: 30px;
margin-right: 20px;
}
/* Applying styles when checking the buttons */
.questions input[type="radio"]:checked ~ label {
background-color: var(--color-blue-grayed);
border-color: var(--color-blue);
}
.questions input[type="radio"]:checked ~ label:before {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: white;
}
.questions label {
display: block;
cursor: pointer;
padding: 10px;
margin-bottom: 10px;
background-color: white;
border: 2px solid white;
border-radius: 15px;
}
.questions {
background-color: gray;
padding: 20px;
}
<div class="questions">
<div class="questions__question">
<input type="radio" name="answer" id="answer-1">
<label for="answer-1" data-question-number="1">Car</label>
</div>
<div class="questions__question">
<input type="radio" name="answer" id="answer-2">
<label for="answer-2" data-question-number="2">Kralj</label>
</div>
<div class="questions__question">
<input type="radio" name="answer" id="answer-3">
<label for="answer-3" data-question-number="3">Faca</label>
</div>
</div>

How to use jquery to move a div to the top of a element and the other two to the bottom

Hey I'm making this accordion and when you select an option in the top, one of the three other panels have to show. To accomplish this I would like to move the panel in the DOM to the top of the tree. The other two have to be moved to the bottom however. Right now it just switchs to one of the three but if I select a new one it doesn't update so I'm sure the dom is all mixed up.
HTML
<button class="accordion" id="special_accord">
<h2 class="float-left">2.</h2>
<h2 class="text-center">Model</h2></button>
<div class="panel" id="default_panel">
<label>
<h3 class="text-center">Please select a Device Type above</h3></label>
</div>
<div class="panel" id="laptop_panel">
<div id="col1">
<label class="control control--radio">LAPTOP
<input type="radio" name="radio-model" value="laptop1" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">LAPTOP2
<input type="radio" name="radio-model" value="laptop2" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">LAPTOP3
<input type="radio" name="radio-model" value="laptop3" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel" id="tablet_panel">
<div id="col1">
<label class="control control--radio">iPad 2
<input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad 3
<input type="radio" name="radio-model" value="tablet-ipad3" onclick="calculateTotal()" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad 4
<input type="radio" name="radio-model" value="tablet-ipad4" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Air
<input type="radio" name="radio-model" value="tablet-ipadAir" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Mini
<input type="radio" name="radio-model" value="tablet-ipadMini" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPad Mini 2
<input type="radio" name="radio-model" value="tablet-ipadMini2" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Nexus 7
<input type="radio" name="radio-model" value="tablet-nexus7" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Amazon Fire
<input type="radio" name="radio-model" value="tablet-amazonFire" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Amazon Kindle
<input type="radio" name="radio-model" value="tablet-amazonFire" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel" id="phone_panel">
<div id="col1">
<label class="control control--radio">iPhone 3 & 4
<input type="radio" name="radio-model" value="phone-iphone3" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 5, 5c, 5s
<input type="radio" name="radio-model" value="phone-iphone5cs" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 6
<input type="radio" name="radio-model" value="phone-iphone6" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">iPhone 6 Plus
<input type="radio" name="radio-model" value="phone-iphone6+" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Microsoft Lumia 430
<input type="radio" name="radio-model" value="phone-lumia430" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Galaxy S3
<input type="radio" name="radio-model" value="phone-galaxys3" />
<div class="control__indicator"></div>
</label>
<label class="control control--radio">Galaxy S4
<input type="radio" name="radio-model" value="phone-galaxys4" />
<div class="control__indicator"></div>
</label>
</div>
</div>
CSS
.icon-select {
margin-right: 20px;
margin-left: 20px;
}
#col1 {
float: left;
width: 33%;
height: 100%;
}
#col2 {
float: center;
height: 100%;
width: 33%;
overflow: hidden;
display: table-cell;
}
#col3 {
float: right;
height: 100%;
width: 34%;
margin-left: 20px;
overflow: hidden;
display: table-cell;
}
#price_tally {
float: right;
display: inline-block;
border: 1px solid #6fdd7a;
padding-top: 10px;
border-radius: 2px;
background-color: #6fdd7a;
}
#price_tally hr {
border: 1px solid #ffffff;
margin: 0px;
}
#money_tally {
text-align: center;
font-size: 3em;
padding: 0px;
margin: 0px;
color: #ffffff;
}
#price_tally button {
width: 100%;
height: 100%;
margin: 0px;
padding: 16px;
font-size: 26px;
background-color: #6fdd7a;
color: #ffffff;
border: none;
outline: none;
cursor: pointer;
}
#price_tally button:hover {
background-color: #65c76f;
}
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 2px;
width: 50%;
text-align: left;
outline: none;
transition: 0.4s;
border-left: 1px solid #6fdd7a;
border-right: 1px solid #6fdd7a;
border-top: 1px solid #6fdd7a;
border-radius: 4px;
border-bottom: none;
}
button.accordion.active,
button.accordion:hover {
background-color: #6fdd7a;
color: #ffffff;
}
div.panel {
padding: 0px 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
width: 46%;
border-right: 1px dotted #6fdd7a;
border-left: 1px dotted #6fdd7a;
transition: max-height 0.2s ease-out;
}
#optional_panel {
border-bottom: 1px solid #6fdd7a;
}
label > input {
visibility: hidden;
position: absolute;
}
label > input + img {
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
-webkit-transition: all 0.25s linear;
}
label > input:checked + img {
background-color: #6fdd7a;
}
.invisible {
display: none;
}
div.showing {
padding: 0px 18px;
background-color: #ffffff;
max-height: 600px;
overflow: hidden;
width: 46%;
max-height: 100%;
border-right: 1px dotted #6fdd7a;
border-left: 1px dotted #6fdd7a;
transition: max-height 0.2s ease-out;
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
background: #444;
}
.control input:checked ~ .control__indicator {
background: #6fdd7a;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
background: #6fdd7a;
}
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
.control input:checked ~ .control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
top: 7px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
background: #7b7b7b;
}
JS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
};
}
var def = $("#special_accord");
var lap = $("#laptop_panel");
var tab = $("#tablet_panel");
var pho = $("#phone_panel");
$("#laptop_button").click(function () {
lap.before().insertAfter(def);
});
$("#tablet_button").click(function () {
tab.before().insertAfter(def);
});
$("#phone_button").click(function () {
pho.before().insertAfter(def);
});

This may not really answer your question. But is this close to your objective?
I am not too sure about your objective here.
$(".accordion").on("click", function(e){
$(".panel").hide();
console.log("selected: ", $(this).attr("data-model"));
var model = $(this).attr("data-model");
if (model) {
$( "#" + model + "_panel").show("slow");
}
else {
$("#default_panel").show("slow");
}
});
// hide all panels
$(".panel").hide();
https://jsfiddle.net/sudarpochong/ncynro4j/

Dropdown menu closes when i click it (anywhere)

I have a dropdown menu with a login/register form, but when i try to click the form content, the menu closes.
I tried to do something with Javascript that it only closes when i click the "X" button but i wasnt sucessful. Here's the code:
with the hamburguer menu closed
with the hamburguer menu open
function animaIcon(x){
x.classList.toggle("change");
}
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
$('.container').on('click', function() {
if ($('.dropdown-content').css('opacity')==0) $('.dropdown-content').css('opacity', 0.95);
else $('.dropdown-content').css('opacity', 0);
});
/* HAMBURGUER MENU */
.icone-menu {
width: 100%;
float: right;
padding: 18px 8%;
}
.container {
display: block;
cursor: pointer;
float: right;
position: relative;
}
.dropdown-content {
display: none;
background-color: #111;
width: 100vw;
height: 100vh;
margin-top: -55px;
margin-left: -310px;
position: absolute;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
}
.dropdown-content a {
font-weight: bold;
font-size: 150%;
color: white;
padding: 100px 18px;
display: block;
float: left;
}
.down-botao a {
color: #11E77C;
font-weight: bold;
}
.dropdown-content button {
padding: 10px;
width: 40%;
margin-left: 15px;
font-weight: bolder;
border-radius: 15px;
background-color: black;
border-style: solid;
border-color: #dd3910;
color: white;
}
.modal {
background-color: #fff;
width: 400px;
padding: 30px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-height: 420px;
}
.tab {
float: left;
&:first-of-type {
margin-right: 15px;
}
}
.dropdown-content a:hover {
color: #13c7ae;
}
.show {
display: block;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px auto;
transition: 0.4s;
position: relative;
z-index: 1000
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<nav class="icone-menu">
<img src="img/logo.png" alt="crossagenda" class="logo-mobile">
<div class="container" onclick="animaIcon(this), myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="myDropdown" class="dropdown-content">
<ul>
<li>Home</li>
<li>What</li>
<li class="down-botao">Download</li>
</ul>
<div class="modal">
<div class="tab">
<input type="radio" id="sign-in" name="options" class="option" checked/>
<label for="sign-in">Sign in</label>
<form action="#" class="form">
<p class="float-label">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Username"/>
</p>
<p class="float-label">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password"/>
</p>
<p>
<input type="submit" value="Sign me in"/>
</p>
<div class="forgot"> Forgot your password? </div>
</form>
</div>
<div class="tab">
<input type="radio" id="sign-up" name="options" class="option"/>
<label for="sign-up">Sign up</label>
<form action="#" class="form">
<p class="float-label">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Email"/>
</p>
<p class="float-label">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password"/>
</p>
<p class="float-label">
<label for="confirm-password">Confirm password</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm password"/>
</p>
<p class="toggle">
<label for="accept">
<input type="checkbox" id="accept" name="accept"/>
I accept the Terms & Services</label>
</p>
<p>
<input type="submit" value="Sign me up"/>
</p>
</form>
</div>
</div>
</div>
</div>

Here is what is happening when a user clicks an element inside .container:
The click event is trigger on the target element
The event travels toward the root of the DOM, triggering itself on each element it finds along the way (the term "triggering" may be misleading; the event is only "triggered" once).
When it gets to .container, your callback function is invoked and the drop-down menu is collapsed.
To resolve this issue, make sure any click events for elements within .container (that you would like to NOT trigger the drop-down menu's collapse) stop propagation of that event.
$('.container .buttons').on('click',function(e) {
e.stopPropagation();
// do whatever
});

function animaIcon(x) {
x.classList.toggle("change");
}
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
$('.modal').toggle();
}
$('.container').on('click', function() {
if ($('.dropdown-content').css('opacity') == 0) $('.dropdown-content').css('opacity', 0.95);
else $('.dropdown-content').css('opacity', 0);
});
body {
background-color: blue;
}
/* HAMBURGUER MENU */
.icone-menu {
width: 100%;
float: right;
padding: 18px 8%;
}
.container {
display: block;
cursor: pointer;
float: right;
position: relative;
}
.dropdown-content {
/*display: none;*/
background-color: #111;
width: 100vw;
height: 100vh;
margin-top: -55px;
margin-left: -310px;
position: absolute;
opacity: 0;
-webkit-transition: all 1s ease-in-out;
}
.dropdown-content a {
font-weight: bold;
font-size: 150%;
color: white;
padding: 100px 18px;
display: block;
float: left;
}
.down-botao a {
color: #11E77C;
font-weight: bold;
}
.dropdown-content button {
padding: 10px;
width: 40%;
margin-left: 15px;
font-weight: bolder;
border-radius: 15px;
background-color: black;
border-style: solid;
border-color: #dd3910;
color: white;
}
.modal {
background-color: #fff;
width: 400px;
padding: 30px;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-height: 420px;
display: none;
}
.tab {
float: left;
}
tab:first-of-type {
margin-right: 15px;
}
.dropdown-content a:hover {
color: #13c7ae;
}
.show {
opacity: 0.95;
transition: opacity 1s ease-in-out;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px auto;
transition: 0.4s;
position: relative;
z-index: 1000;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="icone-menu">
<a href="index.html">
<img src="img/logo.png" alt="crossagenda" class="logo-mobile">
</a>
<div class="container" onclick="animaIcon(this), myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="myDropdown" class="dropdown-content">
<ul>
<li>Home
</li>
<li>What
</li>
<li class="down-botao">Download
</li>
</ul>
</div>
</div>
<div class="modal">
<div class="tab">
<input type="radio" id="sign-in" name="options" class="option" checked />
<label for="sign-in">Sign in</label>
<form action="#" class="form">
<p class="float-label">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Username" />
</p>
<p class="float-label">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password" />
</p>
<p>
<input type="submit" value="Sign me in" />
</p>
<div class="forgot">
Forgot your password?
</div>
</form>
</div>
<div class="tab">
<input type="radio" id="sign-up" name="options" class="option" />
<label for="sign-up">Sign up</label>
<form action="#" class="form">
<p class="float-label">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Email" />
</p>
<p class="float-label">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Password" />
</p>
<p class="float-label">
<label for="confirm-password">Confirm password</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm password" />
</p>
<p class="toggle">
<label for="accept">
<input type="checkbox" id="accept" name="accept" />I accept the Terms & Services
</label>
</p>
<p>
<input type="submit" value="Sign me up" />
</p>
</form>
</div>
</div>
</nav>

Ok, was able to fix it using this javascript code:
$( "#btn-menu" ).click(function() {
$(".dropdown-content").toggle("slow");
});

Vertical and Horizontal alignment of text issue with Select Box in Internet Explorer 8

Please help me to resolve this vertical and horizontal aligning of text issue in select box with Internet Explorer 8. Text in select box is aligning at bottom instead of aligning at the middle.
Here is the problem snapshot :
Doctype Declaration tag used is :
<!DOCTYPE HTML>
<!--[if lt IE 8]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<![endif]-->
HTml Code is :
<div class="search">
<span class="search-btn">
<span class="open">
<i class="ico ico-zoom"></i>
Search
</span>
<span class="close hidden">
<i class="ico ico-x"></i>
Close
</span>
</span>
<div class="form-body hidden">
<div class="form-row">
<label for="field-date" class="form-label">Date</label>
<div class="form-controls">
<input type="text" class="field field-small" placeholder="From" id="field-date" name="<%=DateSearchControllerHelper.DATE_FROM%>" readonly="readonly" value="${dateFrom}" <c:if test="${!empty requestScope.dateFromInvalid}">class="red"</c:if>>
<label for="field-date">
<i class="ico ico-calendar"></i>
</label>
<input type="text" class="field field-small" placeholder="To" id="field-date2" name="<%=DateSearchControllerHelper.DATE_TO%>" readonly="readonly" value="${dateTo}" <c:if test="${!empty requestScope.dateToInvalid}">class="red"</c:if>>
<label for="field-date2">
<i class="ico ico-calendar"></i>
</label>
</div><!-- /.form-controls -->
</div><!-- /.form-row -->
<input type="hidden" name="submitDateSearch" id="submitDateSearch" value="true"/>
<div class="form-row">
<label for="field-select" class="form-label">Select Column</label>
<div class="form-controls">
<label class="select-label">
<select id="colList1" name="colList1" class="select">
<c:forEach var="column" items="${colList1}">
<option value="${column}" <c:if test="${column == colListSelection1}">SELECTED</c:if>>${column}</option>
</c:forEach>
</select>
</label>
</div><!-- /.form-controls -->
</div><!-- /.form-row -->
<div class="form-row">
<label for="field-criteria" class="form-label">Search Criteria</label>
<div class="form-controls">
<input type="text" class="field" name="value1" id="value1" value="${value1}" onKeyPress="javascript:validateEnterKeyOnSearch(event,this.form,this)">
</div><!-- /.form-controls -->
</div><!-- /.form-row -->
<div class="form-row">
<label for="field-criteria" class="form-label"> </label>
<div class="form-controls">
<label class="select-label">
<select name="andOr" id="andOr" class="select select-small">
<option value="and" <c:if test="${andOr == 'and'}">SELECTED</c:if>>and</option>
<option value="or" <c:if test="${andOr == 'or'}">SELECTED</c:if>>or</option>
</select>
</label>
</div><!-- /.form-controls -->
</div><!-- /.form-row -->
<div class="form-row">
<label for="field-column2" class="form-label">Select Column</label>
<div class="form-controls">
<label class="select-label">
<select name="colList2" id="colList2" class="select">
<c:forEach var="column" items="${colList2}">
<option value="${column}" <c:if test="${column == colListSelection2}">SELECTED</c:if>>${column}</option>
</c:forEach>
</select>
</label>
</div><!-- /.form-controls -->
</div><!-- /.form-row -->
<div class="form-row">
<label for="field-criteria2" class="form-label">Search Criteria</label>
<div class="form-controls">
<input type="text" class="field" name="value2" id="value2" value="${value2}" onKeyPress="javascript:validateEnterKeyOnSearch(event, this.form, this)">
</div><!-- /.form-controls -->
</div><!-- /.form-row -->
<div class="form-actions">
<input type="button" value="Search" onclick="javascript:performSearch(this.form.name,<%=AppProperties.ROWS_PER_PAGE%>,<%=AppProperties.ELCY_LIST_MAX_SIZE%>);" class="btn btn-green" />
</div><!-- /.form-actions -->
</div><!-- /.form-body -->
<input type="hidden" name="submitSearch" id="submitSearch" value="true"/>
Css Code used is :
.search { float: left; margin-left: 4px; font-size: 0; line-height: 0; font-family: "Arial Black","Arial Bold",Gadget,sans-serif; }
.search-btn { display: inline-block; width: 90px; height: 28px; margin: 21px 0 0 4px; background-color: #55be28; font-size: 11px; line-height: 28px; text-align: center; color: #fff; font-weight: bold; vertical-align: top; cursor: pointer; }
.search-btn {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.search-btn:hover { opacity: .7; }
.search-btn .ico { margin-right: 5px; }
.form-body,
.form-row { display: inline-block; }
.form-body.hidden { opacity: 0; }
.form-body { opacity: 1; }
.form-body {
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.form-row { margin-left: 10px; float:left; }
.form-label { display: inline-block; margin-bottom: 7px; font-size: 10px; line-height: 13px; color: #464646; }
.field,
.select { width: 88px; height: 28px; padding: 0 10px; border: 1px solid #e1e1e1; font-size: 11px; line-height: 28px; color: #464646; }
.field-small { width: 65px; }
.select { width: auto; height: 30px; padding:0;}
.select-small { width: 70px; }
.form-controls label + input { margin-left: 20px; }
.form-controls label .ico { margin: -17px 0 0 5px; vertical-align: top; cursor: pointer; }
.form-controls label { position: relative; display: inline-block; }
.form-controls .select-label:after { display:none;/*content: ''; position: absolute; top: 1px; right: 1px; width: 29px; height: 28px; background: url(images/sprite.png) -124px -27px no-repeat; cursor: pointer; pointer-events: none;*/ }
.form-actions { overflow: hidden; /*padding-top: 5px; by me*/ display: inline; }
.form-actions .btn { float: right; /*Extra from me*/ margin:21px 0 0 10px; }
.hidden { display: none; visibility: hidden; }
Thanks

Develop Reference

JavaScript is the programming language of the Web.

Close/Hide Modal - javascript

Calm down bro, Check this jsfiddle link. Add this js code, $(document).on("click",".btn1", function(){ $('#modal').hide(); }); Why so serious ?

<button type="button" id="close"class="btn green btn-default" data-dismiss="modal">Close <i class="fa fa-times" aria-hidden="true"></i></button> Add JavaScript function onSave(){ $('#close').Click(); }

try this. <button class="btn1" type="button" value="Submit" on-click= submit();>Submit</button> // Script function submit() { window.history.back(); }

Put this in file. $('#modal_edit').modal('hide'); is hope help kubb.

Related

How to add check box using field-wrap tag in html?

How to stylize radio buttons in Bootstrap?

How to use jquery to move a div to the top of a element and the other two to the bottom

Dropdown menu closes when i click it (anywhere)

Vertical and Horizontal alignment of text issue with Select Box in Internet Explorer 8

Categories

Resources