I have a scenario,that I used css for extending search box on focus,when I focussed on search box then the search box must decrease and the cancel button must be placed beside of search box.
Css:
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
}
: content-box;
font-size: 100%;
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing
}
Here is my plunker link:
https://plnkr.co/edit/Z7mfglWEoDyjbDfFDbLM?p=preview
And the expected output will be like this:
Is it possible with Angularjs or JavaScript?
Possible solution would be to position the div you want absolutely. Then on focus of the input, make the div visible or slide it into view;
Using your plunk, add the following CSS:
.clrble{
position: relative;
}
.frmcntr:focus + .btn{
display: block;
}
.btn{display: none; position: absolute; right: 0;}
and here's the HTML:
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div class="btn">button here</div>
</div>
It's not perfect, but i think it will point you in the right direction.
with float property you can mange the side by side positions.
use float:left; css property for you textbox class and that will work for your requirement and the placement of button also can be handle by css also.
css for textbox
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
You can just hide and show a span with 'cancel' in it.
/* Styles go here */
.clrble .frmcntr {
background: url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family: SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color: rgba(247, 247, 247, 1);
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
-moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
box-shadow: 0 0 5px rgba(109, 207, 246, .5);
background-color: rgba(247, 247, 247, 1);
background: url("images/search.png") no-repeat 10px center;
padding-left: 40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
.clrble {
position: relative;
}
.frmcntr:focus+.btn {
display: block;
}
.btn {
display: none;
position: absolute;
right: 0;
}
.cancel {
visibility: hidden;
color: blue;
font-family: sans-serif;
font-size: 20px;
}
.frmcntr:focus + .cancel {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<span class="cancel">Cancel</span>
<span class="btn">button here</span>
</div>
</body>
</html>
You can use the blur event for the input and the mousedown event as mousedown event fires before the blur event.
var mouseDown = false;
$('input').blur(function() {
if(mouseDown) // cancel the blur event
{
$('input').focus();
mouseDown = false;
}
});
$('#cancelBtn').mousedown(function(){
mouseDown = true;
console.log('Button Clicked');
});
$('input').focus(function(){
$('#cancelBtn').css('display', 'block');
});
$('input').focusout(function(){
$('#cancelBtn').css('display', 'none');
});
/* Styles go here */
.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;
}
.clrble .frmcntr:focus {
width: 70%;
text-align: left;
background-color: green;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
background-color:rgba(247, 247, 247, 1);
background:url("images/search.png") no-repeat 10px center;
padding-left:40px;
}
.clrble .frmcntr {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-size: 100%;
}
#cancelBtn {
color:blue;
float:left;
font-weight:bold;
display:none;
padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="clrble">
<input type="text" placeholder="Search" class="frmcntr">
<div id="cancelBtn">Cancel</div>
</div>
</body>
</html>
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 not a pro on coding, I created a popup script to use with a cpa redirect after user click the css button on the second popup.
But when user clicks the css button, nothing happens. I added a html button and it works like a charm. I tried to figure out the root cause but had no luck.
run the code here on w3schools.com
$(function() {
openUp('#overlay')
$("#popup").on('click', function() {
openUp('#overlay2')
closeDown('#overlay')
});
function openUp(el) {
$(el).fadeIn(500, function() {
$(this).next().show();
});
}
function closeDown(el) {
$(el).fadeOut(500, function() {
$(this).next().hide();
});
}
$('a').each(function(index, element) {
$(this).click(function(e) {
e.preventDefault();
});
});
});
#DIV_1 {
bottom: 0px;
box-shadow: rgba(255, 255, 255, 0.298) 0px 0px 2px 0px inset, rgba(255, 255, 255, 0.298) 0px 1px 0px 0px inset;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
height: 39px;
left: 0px;
letter-spacing: 2px;
position: relative;
right: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 79, 132) 0px 1px 0px;
text-size-adjust: 100%;
top: 0px;
width: 135px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 53.2344px 19.5px;
transform-origin: 53.2344px 19.5px;
caret-color: rgb(255, 255, 255);
background: rgb(0, 109, 183) linear-gradient(0deg, rgb(0, 109, 183), rgb(0, 139, 234)) repeat scroll 0% 0% / auto padding-box border-box;
border-top: 1px solid rgb(0, 79, 132);
border-right: 1px solid rgb(0, 79, 132);
border-bottom: 2px solid rgb(0, 79, 132);
border-left: 1px solid rgb(0, 79, 132);
font: normal normal 700 normal 10px / 10px Lego, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 13px 14px;
}
/*#DIV_1*/
img {
width: 100%;
object-fit: scale-down;
min-width: 100%;
height: auto;
}
.form-style-5 {
max-width: 500px;
display: inline-block;
padding: 8px 16px;
background: #f4f7f8;
margin: 8px auto;
padding: 16px;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset {
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 8px;
}
.form-style-5 label {
display: block;
margin-bottom: 6px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255, 255, 255, .1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #e8eeef;
color: #8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset;
margin-bottom: 30px;
}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus {
background: #d2d9dd;
}
.form-style-5 select {
-webkit-appearance: menulist-button;
height: 30px;
}
.form-style-5 input[type="submit"],
.form-style-5 input[type="button"] {
position: relative;
display: block;
padding: 17px 37px 16px 37px;
color: #000;
margin: 0 auto;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #ffcf00;
border-width: 1px 1px 3px;
margin-bottom: 10px;
background: rgb(255, 207, 0) none repeat scroll 0% 0% / auto padding-box border-box;
box-shadow: rgba(232, 105, 2, 0.5) 0px 0px 25px 0px inset;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover {
background: #ffae00;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.1s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?id={removed my aff id}"></script>
<div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup" style="position:fixed; display:none; top:110px; width:90%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<img class="aligncenter wp-image-21 size-full" src="https://images1.sykesassets.co.uk/assets/_files/cached/property/1500x1125/2906/sc_131608230613_2906_12.jpg" alt="ALT TEXT" width="492" height=a uto; />
<p <div id="DIV_1">
PROCEED >>
</p>
</div>
<div id="overlay2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.1; filter: alpha(opacity=60); z-index: 99990; display: none"></div>
<div id="popup2" style="position:fixed; display:none; top:110px; width:85%; height:auto; left: 0; right: 0; margin: 0 auto; background-color:#FFFFFF; z-index:99999; padding:5px; border:solid 2px #1d8cd0; border-radius:5px;">
<p style="color:#FFFFFF;">
</p>
<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number"></span> Please enter your information</legend>
<input type="text" name="field1" placeholder="Receiver's full name *">
<input type="email" name="field2" placeholder="Email *">
<textarea name="field3" placeholder="Shipping address:"></textarea>
<label for="job">Country:</label>
<select id="job" name="field4">
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
<textarea name="field5" placeholder="Greeting message: Eg. Hi Jonathan, ..Loving sister, Christina."></textarea>
</fieldset>
<button type="button" id="myBtn" onclick="og_load();">Apply</button>
<button class="button" style="vertical-align:middle" onclick="og_load();"><span>Apply </span></button>
</form>
</div>
</div>
<head>
<script type="text/javascript" src="https://www.verifycaptcha.com/contentlockers/load.php?(removed my affiliate code)"></script>
</head>
Not sure what a 'css-button' is, but why not just add your .button class to the button like so:
<button class="button" type="button" id="myBtn" onclick="og_load();">Apply</button>
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'm using the Unslider image slider on a SharePoint site, and I'm having issues with the dots and arrows. At this point, I'm seeing small squares that are acting as "dots" and two text arrows that appear on top of each other (but are acting as arrows should).
I really need to place the text arrows with arrow images that appear next to each other and function as the arrows do now. (Changing the squares to dots would be helpful as well, but not a requirement.
Can someone help? This isn't my area of expertise and I'm having issues. The following is the CSS I am using:
dots {
}
.dots LI {
BORDER-BOTTOM: #101 2px solid; BORDER-LEFT: #101 2px solid; TEXT-INDENT: -999em; MARGIN: 0px 4px; WIDTH: 10px; DISPLAY: inline; HEIGHT: 100px; BORDER-TOP: #101 2px solid; CURSOR: pointer; BORDER-RIGHT: #101 2px solid; opacity: .4; border-radius: 100%; -webkit-transition: background .5s, opacity .5s; -moz-transition: background .5s, opacity .5s; transition: background .5s, opacity .5s
}
.dots LI.active {
BACKGROUND: #101; opacity: 1
}
.arrows {
POSITION: absolute; TEXT-ALIGN: right; BOTTOM: 16px; DISPLAY: inline; HEIGHT: 50px; FONT-SIZE: 11pt; RIGHT: 300px; FONT-WEIGHT: bold; LEFT: 10px
}
A IMG {
BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-TOP: 0px; BORDER-RIGHT: 0px
}
Thanks so much!!
Hi try Css included in this file
<!-- The HTML -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unslider.com arrow example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://unslider.com/unslider.min.js"type="text/javascript"></script>
<!-- JavaScript -->
<script type="text/javascript">
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
complete: function() {}, // A function that gets called after every slide animation
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May break non-responsive designs
});
var unslider = $('.banner').unslider();
$('.prev').click(function() {
unslider.data('unslider').prev();
});
$('.next').click(function() {
unslider.data('unslider').next();
});
return false;
});
</script>
<!-- CSS -->
<style type="text/css">
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
.banner {
position: relative;
width: 100%;
overflow: auto;
top: 50px;
/*z-index: -1;*/
font-size: 18px;
line-height: 24px;
text-align: center;
color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.banner ul {
list-style: none;
width: 300%;
}
.banner ul li {
display: block;
float: left;
min-height: 500px;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}
.banner .inner {
padding: 360px 0 110px;
float: left;
vertical-align:-100px;
}
.banner h1, .banner h2 {
font-size: 40px;
line-height: 52px;
color: #fff;
}
.banner .btn {
display: inline-block;
margin: 25px 0 0;
padding: 9px 22px 7px;
clear: both;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border : rgba(255, 255, 255, 0.4) solid 2px;
border-radius: 5px;
}
.banner .btn:hover {
background : rgba(255, 255, 255, 0.05);
}
.banner .btn:active {
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5));
}
.banner .btn, .banner .dot {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.banner .dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
}
.banner .dots li {
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
background: #fff;
opacity: 1;
}
.unslider-arrow {
font-family: Expressway;
font-size: 50px;
text-decoration: none;
color: #3d3d3d;
background: rgba(255,255,255,0.7);
padding: 0 20px 5px 20px;
}
.next {
position: absolute;
top: 65%;
right: 0
}
.prev {
position: absolute;
top: 65%;
right: 90 /* change to left:0; if u wanna have arrow on left side */
}
</style>
</head>
<!-- Body of HTML document -->
<body>
<div class="slider">
<div class="banner">
<ul>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
<li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li>
</ul>
</div>
←
→
</div>
</body>
</html>
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>