如何做移动端弹出层

来源：互联网发布：java方法重写例子编辑：程序博客网时间：2024/05/29 16:19

在做移动端开发时,经常会碰到点击某个按钮出现一个弹出层的业务.但由于市面上的手机型号、大小都不一致,只用一个遮罩层来实现这种功能会出现许多的问题。那么到底该怎么做呢?

1.首先我们的弹出层用固定定位来做,代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />    <title>Title</title>    <script src="jquery-1.11.3.min.js"></script><style>    *{  margin:0px;  padding:0px;}.modal{   position:fixed;   left:0px;   top:0px;   background:rgba(0,0,0,0.6);   width:100%;   height:100%;}</style></head><body>     <div class="modal">         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eum maxime fugit cupiditate voluptatum nisi aut in animi quaerat quisquam ut dolor iure dicta magni itaque atque magnam cum explicabo.             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eum maxime fugit cupiditate voluptatum nisi aut in animi quaerat quisquam ut dolor iure dicta magni itaque atque magnam cum explicabo.             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eum maxime fugit cupiditate voluptatum nisi aut in animi quaerat quisquam ut dolor iure dicta magni itaque atque magnam cum explicabo.       </div></body></html>

这样确实能使模态框充满整个屏幕,但是会有一个问题出现,当内容很多超过手机屏幕时,这个模态框不能滚动,这个肯定是我们不希望的.为了解决这个问题,只需要在.modal的样式里面增加一条规则 overflow:auto; 这样就能保证当内容超出手机高度时,模态框会自动产生滚动条使其能滚动,效果图如下:

2.在实际场景中模态框的底部需要有一个关闭的按钮,点击即可关闭模态框,但是要求它永远都处于底部,那么这个功能改怎么做呢?

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="initial-scale=1.0, width=device-width,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />    <title>Title</title>    <script src="jquery-1.11.3.min.js"></script><style>    *{  margin:0px;  padding:0px;}.modal{   position:fixed;   left:0px;   top:0px;   background:rgba(0,0,0,0.6);   width:100%;   height:100%;   overflow:auto;}.main{     min-height:100%;             width:100%; padding-top:30px; box-sizing:border-box;}.title{   text-align:center;}         .close{    text-align:center;margin-top:-64px; } .content{ padding-bottom:64px; }</style></head><body>     <div class="modal">         <div class="main">    <div class="content">  <h1 class="title">我是标题</h1>  <div>           </div></div>   </div> <div class="close">    <button>关闭</button> </div> </div></body></html>

当没有数据时,不会出现滚动条并且按钮在底部

当 .content下的div里面的内容非常多时,就会出现滚动条,并且保证按钮在内容的下面,且位于底部

这样一来就满足我们的需求了.

阅读全文

0 0