Hi, Can i ask some help on how to use the transition?,I have modal box and i want that, if my page will load the modal box will drop down same as the twitter bootstrap modal,but i have no idea on how to this the transition.can you help me please
same as this example…http://cameronbaney.com/tutorials/css3modal/#
Thank you in advance.
This is my css
.mymodal{
bottom: 0;
visibility: hidden;
left: 0;
outline: 0 none;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0;
top:0;
z-index: 1050;
}
.mymodal-content{
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
outline: medium none;
position: relative;
}
.mymodal-body{
padding: 20px;
position: relative;
}
.mymodal-foooter{
border-top: 1px solid #E5E5E5;
margin-top: 15px;
padding: 19px 20px 20px;
text-align: right;
}
.mymodal-dialog{
margin: 30px auto;
width: 600px;
position: relative;
}
.mymodal h1{
font-size: 36px;
margin-bottom: 10px;
margin-top: 20px;
font-weight: 500;
line-height: 1.1;
}
.fade{
transition: opacity 0.15s linear 0s;
}
.fade.in {
opacity: 1;
}
.close {
color: #000000;
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #FFFFFF;
}
button.close {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
cursor: pointer;
padding: 0;
}
.overlaymodal-backdrop {
background-color: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1040;
}
.overlaymodal-backdrop.in {
opacity: 0.5;
}
<div class="mymodal fade in">
<div class="mymodal-dialog">
<div class="mymodal-content">
<div class="mymodal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1>Onload Alert</h1>
</div>
<div class="mymodal-foooter">
</div>
</div>
</div>
</div>
<div class="overlaymodal-backdrop fade in"></div>
Hi,
I assume you are using jquery to switch the modal on?
If you set the modal to be opacity:0 (not visibility:hidden) and move it above the viewport to start with then you can change thge opacity to 1 and move the element into the viewport. You can’t animate visibility as it only has two states - on and off ; unlike opacity which is a continuous change from transparent to opaque.
You could do something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.mymodal {
bottom:100%;
left: 0;
outline: 0 none;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0;
top:-100%;
z-index: 1050;
opacity:0;
}
.mymodal-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
outline: medium none;
position: relative;
}
.mymodal-body {
padding: 20px;
position: relative;
}
.mymodal-foooter {
border-top: 1px solid #E5E5E5;
margin-top: 15px;
padding: 19px 20px 20px;
text-align: right;
}
.mymodal-dialog {
margin: 30px auto;
width: 600px;
position: relative;
}
.mymodal h1 {
font-size: 36px;
margin-bottom: 10px;
margin-top: 20px;
font-weight: 500;
line-height: 1.1;
}
.close {
color: #000000;
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #FFFFFF;
}
button.close {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
cursor: pointer;
padding: 0;
}
.overlaymodal-backdrop {
background-color: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1040;
display:none;
}
.fade { transition: all 0.35s linear 0s; }
.fade.in { opacity: 1; display:block;top:0;bottom:0}
.overlaymodal-backdrop.in { opacity: 0.5; }
.trigger-modal{color:red;cursor:pointer}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>
</head>
<body>
<div class="mymodal fade">
<div class="mymodal-dialog">
<div class="mymodal-content">
<div class="mymodal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1>Onload Alert</h1>
</div>
<div class="mymodal-foooter"> </div>
</div>
</div>
</div>
<div class="overlaymodal-backdrop fade"></div>
<p class="trigger-modal">Trigger modal</p>
<script>
$( ".trigger-modal" ).click(function() {
$( ".mymodal,.overlaymodal-backdrop" ).addClass('in');
});
$( ".close" ).click(function() {
$( ".mymodal,.overlaymodal-backdrop" ).removeClass('in');
});
</script>
</body>
</html>
Of course if you are using jquery you could just fade in and out with jquery anyway.
Hi paul, Thank you for the quick reply…how to remove the scroll bars?In my actual page the scroll bars are visible,I tried your demo and it has no scroll bars and it works properly…can you help me please how can i remove the scroll bars?
Thank you in advance.
Hi jemz,
I’d need to see your demo to see what’s going on. Can you knock up a quick demo or codepen?
Which scrolbars are you trying to hide? Is is the scrollbars on existing content or are scrolbars appearing on your modal?
Hi Paul,
I don’t know how to use the codepen,i want to hide the scrollbars on my existing content when my modal display and get it back the scorllbar content when the modal hide…
Thank you in advance.
Hi,
You’d need oto create a page wrapper that holds all the content and then you can hide the overflow on that page wrapper.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
html,body{height:100%;margin:0;padding:0}
.mymodal {
bottom:100%;
left: 0;
outline: 0 none;
overflow-x: auto;
overflow-y: scroll;
position: fixed;
right: 0;
top:-100%;
z-index: 1050;
opacity:0;
}
.mymodal-content {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
outline: medium none;
position: relative;
}
.mymodal-body {
padding: 20px;
position: relative;
}
.mymodal-foooter {
border-top: 1px solid #E5E5E5;
margin-top: 15px;
padding: 19px 20px 20px;
text-align: right;
}
.mymodal-dialog {
margin: 30px auto;
width: 600px;
position: relative;
}
.mymodal h1 {
font-size: 36px;
margin-bottom: 10px;
margin-top: 20px;
font-weight: 500;
line-height: 1.1;
}
.close {
color: #000000;
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
opacity: 0.2;
text-shadow: 0 1px 0 #FFFFFF;
}
button.close {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
cursor: pointer;
padding: 0;
}
.overlaymodal-backdrop {
background-color: #000000;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1040;
display:none;
}
.fade { transition: all 0.35s linear 0s; }
.fade.in {
opacity: 1;
display:block;
top:0;
bottom:0
}
.overlaymodal-backdrop.in { opacity: 0.5; }
.trigger-modal {
color:red;
cursor:pointer
}
.wrapper.in{
height:100%;
overflow:hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>
</head>
<body>
<div class="mymodal fade">
<div class="mymodal-dialog">
<div class="mymodal-content">
<div class="mymodal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
<h1>Onload Alert</h1>
</div>
<div class="mymodal-foooter"> </div>
</div>
</div>
</div>
<div class="overlaymodal-backdrop fade"></div>
<div class="wrapper">
<p class="trigger-modal">Trigger modal</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
<p>content to cause scrollbar</p>
</div>
<script>
$( ".trigger-modal" ).click(function() {
$( ".mymodal,.overlaymodal-backdrop,.wrapper" ).addClass('in');
});
$( ".close" ).click(function() {
$( ".mymodal,.overlaymodal-backdrop, .wrapper" ).removeClass('in');
});
</script>
</body>
</html>
Hi Paul,
It works in my home page
html,body{height:100%;margin:0;padding:0}
.wrapper.in{
height:100%;
overflow:hidden;
}
however,when i tried to navigate to other menus my page will have no vertical scroll bar anymore and i could not see the other content because i have no scroll bar anymore.
Thank you in advance.
It should make no difference because the class of ‘.in’ is only added when the modal is shown and then removed when the modal goes away. You can’t navigate anywhere when the modal is open.
Hi Paul,
Thank you for the reply…after the modal goes away when i tried to click some menus like “Our products” then i have long content in this page but there is no scroll bar.I could not scroll to the bottom.
maybe this code causes
html,body{height:100%;margin:0;padding:0}
HI,
You have set #ja-wrapper to height:100% and then hidden the overflow. That means it can never show higher than the viewport because that’s where an initial 100% stops. Change the height to min-height:100%.
#ja-wrapper.in {
min-height: 100%;
height:auto;
overflow: hidden;
}
Actually, why have you got the class of ‘.in’ added ? I thought you were only adding that when a modal was being shown?
why have you got the class of ‘.in’ added ?
You mean in the body?..maybe the js always add “.in” every time when i navigate to other menu.
No its added here:
#ja-wrapper.in{}
I assumed that you were adding that class of .in when the modal was activated. The idea was that when the modal was triggered the existing page content had its scrollbar removed and we were using that class of .in to do this.