prevent body scroll on modal close - modal-dialog

I have a simple html/css modal dialog that I close with a button and onclick event handlers in javascript. When the modal window is closed, the body of the site scrolls to the top of the screen. I need to prevent this.
Here is my code:
function modalClose() {
if (location.hash == '#log_in') {
location.hash = '';
}
}
// Handle ESC key (key code 27)
document.addEventListener('keyup', function(e) {
if (e.keyCode == 27) {
modalClose();
}
});
var modal = document.querySelector('#log_in');
// Handle click on the modal container
modal.addEventListener('click', modalClose, false);
// Prevent event bubbling if click occurred within modal content body
modal.children[0].addEventListener('click', function(e) {
e.stopPropagation();
}, false);
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog > div {
height: auto;
width: 75%;
position: relative;
margin-top: 2%;
margin-bottom: 10%;
margin-left: 10%;
margin-right: 10%;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -11px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
text-indent: 0px;
}
.close:hover {
background: navy;
}
<link href="https://thomaswurdinger.com/Store_Reboot/css/styles.css" rel="stylesheet" />
<script src="https://thomaswurdinger.com/Store_Reboot/js/js.js"></script>
<link href="https://thomaswurdinger.com/Store_Reboot/css/style.css" rel="stylesheet" />
<div id="log_in" class="modalDialog">
<div>
X
<div>Modal Contents</div>
</div>
</div>

I changed :
if (location.hash == '#log_in') {
location.hash = '';
}
to:
if (location.hash == '#log_in') {
location.hash = 'pagename.php';
}

Related

Ionic can i get round input

I need round input in ionic and if possible to use Floating something like this in the image. Its very easy in Flutter but dont know how can i do this in ionic. Or if just possible to make it round input ?
Here is image
enter image description here
to achieve that, you need to create your own component or get one from GitHub or Codepen or somewhere else. ionic does not provide anything like this.
Edited:
I made a component for you and I put it on Codepen. You just have to convert jQuery to your framework syntax.
Click to View on Codepen.io
Here is the component:
HTML:
<div class="container">
<div class="input-container">
<label>Name</label>
<input type="text">
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: Helvetica;
background: #eee;
-webkit-font-smoothing: antialiased;
}
.container {
width: 380px;
margin: 4em auto;
padding: 2em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
}
.input-container {
position: relative;
}
input {
font-size: 18px;
padding: 10px 15px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: 1px solid #999;
border-radius: 1000px;
}
input:focus {
outline: none;
border: 1px solid #00ff00;
}
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
padding: 0 10px;
}
.stylee {
top: -20px;
transform: scale(.75);
left: -2px;
color: #00ff00;
}
JavaScript (jQuery):
$('input').focus(function() {
$(this).prev().addClass('stylee');
}).blur(function() {
if($(this).val())
{
$(this).prev().addClass('stylee');
}
else
{
$(this).prev().removeClass('stylee');
}
});

Foundation & CSS : How to make pre-made form into a text area

I am using a pre-made form (Haruki) from https://tympanus.net/Development/TextInputEffects/
JSFiddle is https://jsfiddle.net/kacikw/6b9djm76/#&togetherjs=ERPObvDR7G
I can't figure out how to make the input area into a text area that can have more than 1 line (for a comment section).
Like I don't know how to modify the pre-made form, I tried changing the classes in the html and css to textarea versions of the input (like if it was .input-field I made it .textarea-field)
Please help I'm a desperate student working on my final.
HTML
<div class="cell small-12">
<div class="textarea textarea--haruki">
<div class="textarea__field textarea__field--
haruki" type="text" id="input-3" />
<label class="textarea__label textarea__label--haruki" for="input-3">
<textarea class="textarea__label-content textarea__label-content--haruki">MESSAGE
</textarea>
</label>
</div>
</div>
CSS
.textarea {
position: relative;
z-index: 1;
display: inline-block;
margin: 1em;
max-width: 350px;
width: calc(100% - 2em);
vertical-align: top;
}
.textarea__field {
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-appearance: none; /* for box shadows to show on iOS */
}
.textarea__field:focus {
outline: none;
}
.textarea__label {
display: inline-block;
float: right;
width: 40%;
color: #6a7989;
font-weight: bold;
font-size: 70.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.textarea__label-content {
position: relative;
display: block;
padding: .9em 0;
width: 100%;
}
.graphic {
position: absolute;
top: 0;
left: 0;
fill: none;
}
.icon {
color: #ddd;
font-size: 150%;
}
/* Haruki */
.textarea--haruki {
margin: 3em 1em 1em;
}
.textarea__field--haruki {
padding: 1em 0.25em;
width: 100%;
background: transparent;
color: #CC450C;
font-size: 1.55em;
font-family: 'Overpass', sans-serif;
}
.textarea__label--haruki {
position: absolute;
width: 100%;
text-align: left;
pointer-events: none;
}
.textarea__label-content--haruki {
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.textarea__label--haruki::before,
.textarea__label--haruki::after {
content: '';
position: absolute;
left: 0;
z-index: -1;
width: 100%;
height: 4px;
background: #BEEFEC;
-webkit-transition:-webkit-transform 0.3s;
transition: transform 0.3s;
}
.textarea__label--haruki::before {
top: 0;
}
.textarea__label--haruki::after {
bottom: 0;
}
.textarea__field--haruki:focus + .textarea__label--haruki
.textarea__label-content--haruki,
.textarea--filled .textarea__label-content--haruki {
-webkit-transform: translate3d(0, -90%, 0);
transform: translate3d(0, -90%, 0);
}
.textarea__field--haruki:focus + .textarea__label--haruki::before,
.textarea--filled .textarea__label--haruki::before {
-webkit-transform: translate3d(0, -0.5em, 0);
transform: translate3d(0, -0.5em, 0);
}
.textarea__field--haruki:focus + .textarea__label--haruki::after,
.textarea--filled .textarea__label--haruki::after {
-webkit-transform: translate3d(0, 0.5em, 0);
transform: translate3d(0, 0.5em, 0);
}
/*for a clear bg*/
[type='text']:focus{
border: none;
background-color: transparent;
box-shadow: none;
}
You don't put input tag into textarea.
Try <textarea cols="10" row="10"></textarea>

Multiple responsive pop-ups in same page

i'm trying to add two responsive popups in my page but since i'm new in javascript i cant figure out how to modify this code to make it work for both. So far only one works.
html
<div class="container">
<h1>Responsive Popup</h1>
<a id= "popup-trigger1" class="popup-trigger">Open PopUp 1</a>
<a id= "popup-trigger2" class="popup-trigger">Open PopUp 2</a>
</div>
<div class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
css
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger { display: block; margin: 0 auto; padding: 20px; max-width: 260px; background: #4EBD79; color: #fff; font-size: 18px; font-weight: 700; text-align:center; text-transform: uppercase; line-height: 24px; cursor: pointer; }
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
.container {
max-width: 400px;
margin: 0 auto;
padding: 30px;
text-align: center;
background: white;
border-radius: 10px;
border: 5px solid #9AD3DE;
box-sizing: border-box;
}
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
> div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(#000000, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
#include transform(translate(-50%, -50%));
left: 50%;
top: 50%;
text-align: center;
border: 5px solid #9AD3DE;
}
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color:white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height:30px;
text-align:center;
font-size:20px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0,0,0,0.1);
box-shadow: -3px 1px 6px 0px rgba(0,0,0,0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {background: #fff; color: #333; font-size: 19px; line-height: 30px; z-index: 9999;}
# Javascript#
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close
buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("#popup-trigger1").on("click", function() {
popupOpenClose($(".popup"));
});
});
This is my codepen Codepen
Your help willlll be so much appreciated.
Thank you very much!
krystel
Here is one way to have separate popups. I added another popup div, gave them unique ids, then created a data-target attribute on the triggers. I changed the trigger to work on everything that has a popup-trigger class, and then made a tweak to the wrapper code so that it will create a wrapper in the current popup rather than checking if ANY wrapper exists.
There is also a memory leak because every time you open a popup, you attach more event handlers instead of only attaching them once. I would highly recommend you rework them to avoid issues down the road. Convert them to global events on the document rather than per-popup. I did not change them below as I wanted a minimal change set so you could see what was necessary for your question.
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper", popup).length == 0) {
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if (e.target == this) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find(".popup-btn-close").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function() {
$(".popup-trigger").on("click", function() {
var target = $(this).data('target');
popupOpenClose($(target));
});
});
/* this was actually some kind of LESS or SASS/SCSS originally.
I just stripped out the unnecessary parts, but no changes were necessary */
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
.popup-trigger {
display: block;
margin: 0 auto;
padding: 20px;
max-width: 260px;
background: #4EBD79;
color: #fff;
font-size: 18px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 24px;
cursor: pointer;
}
body {
background-color: #E3E3E3;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
text-align: center;
}
h1,
p,
h2,
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 100;
letter-spacing: 0.5px;
}
h1 {
font-size: 40px;
text-align: center;
color: #666666;
margin: 0 0 30px 0;
}
p {
color: #666666;
margin: 30px auto;
text-align: center;
font-size: 16px;
}
.popup {
background: rgba(100, 100, 100, 0.6);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup>div {
border-radius: 10px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
padding: 30px 15px;
/* Width of popup can be changed */
width: 70%;
max-width: 600px;
z-index: 5001;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: left;
border: 5px solid #f28920;
}
.popup-btn-close {
position: absolute;
background-color: #f28920;
color: white;
top: -15px;
right: -15px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: 'Arial Black', Arial, sans-serif;
cursor: pointer;
-webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1);
}
.popup-btn-close:hover {
background-color: #ac5918;
color: #fff;
}
.popup-text {
background: #fff;
color: #333;
font-size: 19px;
line-height: 30px;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Responsive Popup</h1>
<a class="popup-trigger" data-target="#popup1">Open PopUp 1</a>
<a class="popup-trigger" data-target="#popup2">Open PopUp 2</a>
</div>
<div id="popup1" class="popup">
<div class="popup-text">This is my popup 1</div>
<span class="popup-btn-close">×</span>
</div>
<div id="popup2" class="popup">
<div class="popup-text">This is my popup 2</div>
<span class="popup-btn-close">×</span>
</div>

CSS triangles: Thin border between container and triangle (iPad / Landscape iPhone)

I'm running into a very specific issue using CSS triangles:
I've created buttons that work perfectly on desktop browsers (ie9+, ff, chrome, safari), and on iPhones in portrait mode... The issue exists on iPads (retina and non-retina), as well as iPhones in landscape. The button renders with a line between the main container and the css triangle(s) that I've got in place.
Here's a screenshot on imgur:
http://imgur.com/d0k6lP2
Here's the code I'm using:
HTML:
<span>BUTTON SHAPE</span>
CSS (there are potentially a few non-relevant styles included because this is pasted from a larger file):
.cta-watch {
display: inline-block;
position: relative;
padding: 0 10px;
background-color: #91a1a8;
border-collapse: collapse;
color: white;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
letter-spacing: 2px;
font-weight: 400;
font-size: 30px;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 40px;
text-decoration: none;
transform: rotate(360deg);
}
.cta-watch.large {
display: inline-block;
position: relative;
width: 34px;
height: 32px;
}
.cta-watch.large:hover {
text-decoration: none;
}
.cta-watch.large.arrow-left::after, .cta-watch.large.arrow-right::after {
border-left: none;
border-right: none;
}
.cta-watch.large span {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
}
.cta-watch.large span:before {
width: 0;
height: 0;
content: '';
border-color: transparent transparent #91a1a8 transparent;
border-width: 0 27px 14px 27px;
border-style: solid;
position: absolute;
top: -14px;
left: 0;
}
.cta-watch.large span:after {
width: 0;
height: 0;
content: '';
border-color: #91a1a8 transparent transparent transparent;
border-width: 14px 27px 0 27px;
border-style: solid;
position: absolute;
bottom: -14px;
left: 0;
}
.cta-watch.large:before {
display: block;
width: 100%;
height: 0;
content: '\25BA';
color: white;
font-family: arial, "Helvetica Neue", Helvetica, sans-serif;
margin-left: 3px;
font-size: 22px;
line-height: 34px;
text-align: center;
}
JSBin showing code demo here: http://jsbin.com/ocaGeja/1
Any help would be greatly appreciated - Thank you!
I can reproduce the same issue in Chrome for Windows, changing the zoom level.
At least in this situation, it is solved changing this value to decimal:
.cta-watch.large span:before {
...
top: -13.7px;
May be that can help you ?
Another posibility would be to change the way you create the hexagon. Instead of the triangles way, you can try the multi-background way:
.hexagon {
position: absolute;
left: 20px;
top: 20px;
font-size: 80px;
height: 2em;
width: 1.732em;
background-size: 50.5% 50.5%;
background-image: -webkit-linear-gradient(300deg,transparent 33%, red 0%), -webkit-linear-gradient(240deg,transparent 33%, red 0%), -webkit-linear-gradient(60deg,transparent 33%, red 0%), -webkit-linear-gradient(120deg,transparent 33%, red 0%);
background-repeat: no-repeat;
background-position: top left, top right, bottom left, bottom right;
}
It's responsive em based, so that it can fit your need quite well.
demo

Facebook-like selection

I have made this Facebook-like selection in which the selection can be unselected by clicking the x button. I already got my Auto-complete working but I only want to have the selected options to look like the one on the link. How would I do that?
The source code for FCBKcomplete can be found here:
http://www.emposha.com/javascript/fcbkcomplete.html
It's basically a list (UL) with styled list items.
/* Copyright: Guillermo Rauch <http://devthought.com/> - Distributed under MIT - Keep this message! */
/* TextboxList sample CSS */
ul.holder { margin: 0; border: 1px solid #999; overflow: hidden; height: auto !important; height: 1%; padding: 4px 5px 0; }
*:first-child+html ul.holder { padding-bottom: 2px; } * html ul.holder { padding-bottom: 2px; } /* ie7 and below */
ul.holder li { float: left; list-style-type: none; margin: 0 5px 4px 0; white-space:nowrap;}
ul.holder li.bit-box, ul.holder li.bit-input input { font: 11px "Lucida Grande", "Verdana"; }
ul.holder li.bit-box { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 1px solid #CAD8F3; background: #DEE7F8; padding: 1px 5px 2px; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-input input { width: auto; overflow:visible; margin: 0; border: 0px; outline: 0; padding: 3px 0px 2px; } /* no left/right padding here please */
ul.holder li.bit-input input.smallinput { width: 20px; }
/* Facebook demo CSS */
ul.holder { margin: 0 !important }
ul.holder li.bit-box, #apple-list ul.holder li.bit-box { padding-right: 15px; position: relative; z-index:1000;}
#apple-list ul.holder li.bit-input { margin: 0; }
#apple-list ul.holder li.bit-input input.smallinput { width: 5px; }
ul.holder li.bit-hover { background: #BBCEF1; border: 1px solid #6D95E0; }
ul.holder li.bit-box-focus { border-color: #598BEC; background: #598BEC; color: #fff; }
ul.holder li.bit-box a.closebutton { position: absolute; right: 4px; top: 5px; display: block; width: 7px; height: 7px; font-size: 1px; background: url('close.gif'); }
ul.holder li.bit-box a.closebutton:hover { background-position: 7px; }
ul.holder li.bit-box-focus a.closebutton, ul.holder li.bit-box-focus a.closebutton:hover { background-position: bottom; }
/* Autocompleter */
.facebook-auto { display: none; position: absolute; background: #eee; z-index:1001;}
.facebook-auto .select_all_items {display: block; float: right;}
.facebook-auto .default { padding: 5px 7px; border: 1px solid #ccc; border-width: 0 1px 1px;font-family:"Lucida Grande","Verdana"; font-size:11px; }
.facebook-auto ul { display: none; margin: 0; padding: 0; overflow: auto; position:absolute; z-index:9999}
.facebook-auto ul li { padding: 5px 12px; z-index: 1000; cursor: pointer; margin: 0; list-style-type: none; border: 1px solid #ccc; border-width: 0 1px 1px; font: 11px "Lucida Grande", "Verdana"; background-color: #eee }
.facebook-auto ul li em { font-weight: bold; font-style: normal; background: #ccc; }
.facebook-auto ul li.auto-focus { background: #4173CC; color: #fff; }
.facebook-auto ul li.auto-focus em { background: none; }
.deleted { background-color:#4173CC !important; color:#ffffff !important;}
.hidden { display:none;}
#demo ul.holder li.bit-input input { padding: 2px 0 1px; border: 1px solid #999; }
.ie6fix {height:1px;width:1px; position:absolute;top:0px;left:0px;z-index:1;}