I am having an issue in Bootstrap Modal on iOS 8.1.3 version only. I have vertical scroll able div inside modal. When I touch the modal background then try to scroll the text inside that div, the text sometimes vanished or freeze then after few secs again I can scroll. Which is something weird. Any help will be really appreciable.
Thanks!
<section class="parent">
<h1>Modal a Different Way <small>Using CSS and JS</small></h1>
<div class="child">
<button class="cakeModalJS">Click Me!</button>
<p>I have same behaviour what you have using to Modal concept except common UI issues.</p>
</div>
<div class="cake-modal cake-hidden">
<div class="modal-body">
<button class="modal-close">x</button>
<h3>
Look I'm your inbuild Modal module
</h3>
</div>
</div>
<footer>
<p>Cake Modal by Color Cake. All Right Recieved © 2018</p>
</footer>
</section>
$('.cakeModalJS').click(function(){
$('.cake-modal').removeClass('cake-hidden');
});
$('.cake-modal').on('click', function(e) {
if (e.target !== this)
return;
$('.cake-modal').addClass('cake-hidden');
});
$('.modal-close').click(function(){
$('.cake-modal').addClass('cake-hidden');
});
$color1: #5b5b5b;
$color2: #fff;
#mixin btn-gray {
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
border: 1px solid $color1;
cursor: pointer;
background: $color2;
&:hover{
-moz-box-shadow: inset 1px 0px 4px $color1;
-webkit-box-shadow: inset 1px 0px 4px $color1;
box-shadow: inset 1px 0px 4px $color1;
text-shadow: 0.01px 0.01px 0.01px rgba(91, 91, 88, 0.4);
}
}
.cake-hidden{
display: none;
}
.parent{
position: relative;
padding: 10px;
height: 95vh;
border: 2px solid $color1;
text-align: center;
color: $color1;
z-index: 1;
h1{
margin-top: 0;
border-bottom: 1px solid;
small{
font-size: 40%;
}
}
}
.child{
text-align: left;
button{
border: 1px solid $color1;
padding: 10px;
cursor: pointer;
#include btn-gray;
}
p{
display: inline;
color: $color1;
}
}
.cake-modal{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: rgba(91, 91, 88, 0.2);
z-index: 2;
.modal-body{
position: absolute;
width: calc(100vw/2);
height: calc(100vh/2);
background: $color2;
z-index: 3;
-moz-box-shadow: 1px 0px 4px $color1;
-webkit-box-shadow: 1px 0px 4px $color1;
box-shadow: 1px 0px 4px $color1;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: left;
padding:10px;
h3{
margin-top: 0;
}
.modal-close{
float: right;
padding: 8px 8px;
line-height: 10px;
font-weight: 600;
#include btn-gray;
}
}
}
footer{
position: absolute;
color:$color2;
background: $color1;
padding: 10px;
right: 0;
left: 0;
bottom: 0;
p{
font-size: 10px;
}
}
Related
I tried to add an animation for my form submit button on my Todo list.
Unfortunately, the same button animation works outside form, but inside form only can hover the text. I have no idea where the problem is?
import React from "react";
class TodoForm extends React.Component {
render() {
return (
<div>
<div className={"container"}>
<form action="">
<h1>Todo List</h1>
<input type="text" placeholder={""}/>
<button className="custom-btn btn">Submit</button>
</form>
<button className="custom-btn btn">Submit</button>
</div>
</div>
);
}
}
export default TodoForm;
.container {
display: flex;
flex-direction: row;
/*align-items: center;*/
justify-content: center;
margin-top: 5%;
}
form {
height: 500px;
width: 400px;
background-color: #f4f7fc;
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}
h1 {
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
input[type='text'] {
border: 1px solid #ddd;
height: 6%;
min-width: 60%;
transition: all ease-in 0.25s;
}
.custom-btn {
margin-left: 5px;
width: 25%;
height: 37px;
border-radius: 5px;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
outline: none;
}
.custom-btn, input[type='text'] {
box-shadow: 1px 1px 1px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
}
.btn {
border: 2px solid #f4f7fc;
color: #f59cb1;
font-family: 'Orbitron', sans-serif;
font-weight: 900;
}
.btn:after {
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow:
-7px -7px 20px 0px #fff9,
-4px -4px 5px 0px #fff9,
7px 7px 20px 0px #0002,
4px 4px 5px 0px #0001;
transition: all 0.3s ease;
}
.btn:hover {
color: #FF6F91;
}
.btn:hover:after {
left: auto;
right: 0;
width: 100%;
}
.btn:active {
top: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
The background color doesn't let you see the animation, just comment it;
form {
height: 500px;
width: 400px;
/*background-color: #f4f7fc;*/
border: 2px solid;
border-radius: 10px;
box-shadow:8px 8px 5px;
text-align: center;
}
I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>
I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>
Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.
I have a modal dialog that I'd like to close by clicking outside of it, pressing escape, or pressing the closing X in the corner.
I already have the pressing X in the corner part working. Just need the others.
I'm using Bootstrap 2.3.2, and jQuery 1.9.1
My JsFiddle is at:
http://jsfiddle.net/HUD8V/
Since I have to post some code with a fiddle (makes no sense, the fiddle has the code...)
CSS is:
.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 {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.closeModal {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
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;
}
.closeModal:hover {background:#00d9ff;}
I have following html structure :
<div id="content">
<!-- data -->
<div id="popup"></div>
<!-- data -->
</div>
I am displaying my popup on page load , but at the same time I want to disable background area . My popup box is appearing on z-index , and rest background area should be non-accessible at this time .
How can I achieve this ?
I am using this css style :
#popup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 rgb(36, 35, 35);
border: 5px solid rgb(5, 5, 5);
border-radius: 3px 3px 3px 3px;
color: #333333;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 250px;
height: 150px;
width: 600px;
z-index: 2;
padding: 50px;
}
You will need a div to cover the entire window.
This will not be enough though since a user might still use the keyboard to navigate in the background. You would have to iterate all the a/input/button/select elements on the page and add an tab-index attribute set to -1. When you hide the pop-up they should remove the 'tab-index' attribute.
The reason for the tab-index manipulation is also one of accessibility. A user that navigates through the keyboard will have a hard time navigating content inside of your pop-up if you let them navigate in the background.
So, how would we go about constructing this? Just to set you off:
Html:
<div id="popup" class="popup">
<div class="cover"></div>
<div class="popupBody">
...
</div>
</div>
Css:
.popup {
background-color:black;display:none;
position:fixed;
left:0;right:0;top:0;bottom:0;
z-index:3000;
opacity:0.5;
}
js+ jQuery for adding tabindex:
$('input, a, button, select').each(function () {
$(this).attr('tabindex', '-1');
});
Note: Here the popup is the 'cover', with popupBody being the actual popup, uggly but working jsfiddle: http://jsfiddle.net/mjfag/1
An alternative would be to use the JQuery UI module for modal dialogues. That does nothing for the keyboard-navigation though but if that is of no concern all the other stuff is already done for you.
Edit: After some quick testing with a newer version of jQuery UI it seems like they've started handling the keyboard to.
try this
<div class="modalpopup">
<div class="modal-backdrop fade in">//for background disable
</div>
<div
class="modal hide fade in" id="myModal" style="display: block;">
<div class="modal-header">
<h3 id="myModalLabel">
Modal Heading</h3>
</div>
<div class="modal-body">
<h4>
Popover in a modal</h4>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
</div>
<style>
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
top: 10%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
position: relative;
max-height: 400px;
padding: 15px;
overflow-y: auto;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.modal-footer:before,
.modal-footer:after {
display: table;
line-height: 0;
content: "";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
</style>
You need to completely cover the div: #content with some other div.
Here's the Complete HTML Code :
<html>
<head>
<title>Pop Up Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#main {
width: 100%;
height: 100%;
background-color: #EFEFEF;
padding: 50px;
font-size: 14px;
font-weight: bold;
}
#enclosePopUp {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 1;
filter: alpha(opacity = 100);
display: none;
z-index: 2;
}
#popup {
position: absolute;
_position: absolute; /* hack for internet explorer 6 */
height: 45px;
width: 295px;
background: #FFFFFF;
left: 500px;
top: 250px;
text-align: center;
border: 2px solid #BDBDBD;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #D8D8D8;
-webkit-box-shadow: 0 0 5px #D8D8D8;
box-shadow: 0 0 5px #D8D8D8;
}
#disabledLink {
display: none;
}
</style>
<script type="text/javascript">
function loadPopUp() {
$('#enclosePopUp').fadeIn("slow", function() {
$("#main").css({
"opacity" : "0.3",
"z-index" : "1"
});
$("#disabledLink").show();
});
}
function unLoadPopUp() {
$('#enclosePopUp').fadeOut("slow", function() {
$("#main").css({
"opacity" : "1"
});
$("#disabledLink").hide();
});
}
</script>
</head>
<body>
<div id="main">
Click here to show PopUp
<br> <a id="disabledLink" href="http://www.google.com">Google.com</a>
</div>
<div id='enclosePopUp'>
<div id="popup">
This is a pop up with disabled background. <br> <a href="#"
onclick="return unLoadPopUp();">Close</a>
</div>
</div>
</body>
</html>