I am currently working on a simple pullout for a website based on a script I found somewhere on SO. Now I want to add a background overlay to the existing function, but I don't know how and where I have to call it.
Here is the fiddle of the pullout.
/
and this is the function
$(function () {
$("#clickme").click(function () {
if ($(this).parent().hasClass("popped")) {
$(this).parent().animate({
left: '-400px'
}, {
queue: false,
duration: 500
}).removeClass("popped");
} else {
$(this).parent().animate({
left: "0px"
}, {
queue: false,
duration: 500
}).addClass("popped");
}
});
});
I have tried some methods found in the internet, but I am not able to bine the click event corerectly with the append div and so I am stuck and trying to ask for help here.
Thank you!
I am currently working on a simple pullout for a website based on a script I found somewhere on SO. Now I want to add a background overlay to the existing function, but I don't know how and where I have to call it.
Here is the fiddle of the pullout.
http://jsfiddle/hr9bymj1/
and this is the function
$(function () {
$("#clickme").click(function () {
if ($(this).parent().hasClass("popped")) {
$(this).parent().animate({
left: '-400px'
}, {
queue: false,
duration: 500
}).removeClass("popped");
} else {
$(this).parent().animate({
left: "0px"
}, {
queue: false,
duration: 500
}).addClass("popped");
}
});
});
I have tried some methods found in the internet, but I am not able to bine the click event corerectly with the append div and so I am stuck and trying to ask for help here.
Thank you!
Share edited Jan 13, 2015 at 13:08 Ravi Dhoriya ツ 4,4148 gold badges38 silver badges48 bronze badges asked Jan 13, 2015 at 13:07 SupapinziSupapinzi 3453 silver badges12 bronze badges 4- 3 Its unclear, What exactly you want? – Ravi Dhoriya ツ Commented Jan 13, 2015 at 13:11
- you mean this jsfiddle/hr9bymj1/1 – Naeem Shaikh Commented Jan 13, 2015 at 13:11
- or do you mean adding overlay class? like this – Ravi Dhoriya ツ Commented Jan 13, 2015 at 13:12
- I wish someone could help me how to add a background overlay div to this click function, like for the whole <body>, so that once the pullout is clicked/visible, it the rest of the site is covered with an overlay, light in lightbox, or other modal windows. – Supapinzi Commented Jan 13, 2015 at 13:13
3 Answers
Reset to default 4Try like this.
Add another div with overlay class:
<div class="overlay">
</div>
<div id="slideout">
<div id="slidecontent">
I am the content. I am the king!
</div>
<div id="clickme">
</div>
</div>
Update jQuery accordingly:
$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({left:'-400px'}, {queue: false, duration: 500}).removeClass("popped");
$(".overlay").fadeOut(500); //hide overlay on popin
}else {
$(this).parent().animate({left: "0px" }, {queue: false, duration: 500}).addClass("popped");
$(".overlay").fadeIn(500); //show overlay on popout
}
});
});
DEMO
You coul use a :before pseudo class on #slideout, so that it would cover up all the page and be visible only when the #slideout is .popped
Check out the demo here
$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({left:'-400px'}, {queue: false, duration: 500}).removeClass("popped");
}else {
$(this).parent().animate({left: "0px" }, {queue: false, duration: 500}).addClass("popped");
}
});
});#slideout {
background: #f4f4f4;
position: absolute;
width: 400px;
height: 150px;
top: 30%;
left:-400px;
padding-left: 0;
}
/*the overlay bellow*/
#slideout:before{
content: '';
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(0,0,0,.5);
z-index: -1;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in-out;
}
#slideout.popped:before{
opacity: 1;
visibility: visible;
}
#clickme {
position: absolute;
top: 0; right: -20px;
height: 20px;
width: 20px;
background: tomato;
cursor: pointer;
}
#slidecontent {
float:left;
padding: 35px;
}
.overlay {
background-color: #000;
bottom: 0;
display: none;
left: 0;
opacity: 0.5;
filter: alpha(opacity = 50); /* IE7 & 8 */
position: fixed;
right: 0;
top: 0;
z-index: 49;
}<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
I am the content. I am the king!
</div>
<div id="clickme">
</div>
</div>You can create a new class in the css with background image and the add the class to the body when it is clicked Fiddle
$(function () {
$("#clickme").click(function () {
if($(this).parent().hasClass("popped")){
$(this).parent().animate({left:'-400px'}, {queue: false, duration: 500}).removeClass("popped");
$('body').removeClass("bg");
}else {
$(this).parent().animate({left: "0px" }, {queue: false, duration: 500}).addClass("popped");
$('body').addClass('bg');
}
});
});.bg{
background:url('http://placekitten./300/301') ;
}
#slideout {
background: #f4f4f4;
position: absolute;
width: 400px;
height: 150px;
top: 30%;
left:-400px;
padding-left: 0;
z-index: 50;
}
#clickme {
position: absolute;
top: 0; right: -20px;
height: 20px;
width: 20px;
background: tomato;
cursor: pointer;
}
#slidecontent {
float:left;
padding: 35px;
}
.overlay {
background-color: #000;
bottom: 0;
display: none;
left: 0;
opacity: 0.5;
filter: alpha(opacity = 50); /* IE7 & 8 */
position: fixed;
right: 0;
top: 0;
z-index: 49;
}<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
I am the content. I am the king!
</div>
<div id="clickme">
</div>
</div>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742292179a4416403.html
评论列表（0条）