SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post Need help for the transition

    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.

  2. #2
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is my css

    Code:
    
    .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;
    }


    HTML Code:
    <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">&times;</button>
                            <h1>Onload Alert</h1>
                        </div>
                       
    
                        <div class="mymodal-foooter">
                           
                        </div>
    
                    </div>
                </div>
            </div>
            <div class="overlaymodal-backdrop fade in"></div>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    <!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">&times;</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.

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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:

    Code:
    <!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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jemz View Post
    .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?

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    <!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>

  8. #8
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    Code:
    <!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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi Paul,

    It works in my home page

    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.

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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}

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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%.

    Code:
    #ja-wrapper.in {
    min-height: 100%;
    height:auto;
    overflow: hidden;
    }

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Actually, why have you got the class of '.in' added ? I thought you were only adding that when a modal was being shown?

  13. #13
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jemz View Post
    You mean in the body?..maybe the js always add ".in" every time when i navigate to other menu.
    No its added here:
    Code:
    #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •