用CSS3在手机上写弹出框,遮盖层

html:

在页面头部要写

<title>网上预约</title>
<link href="../App_Themes/default/css/header.css" rel="stylesheet" type="text/css" />
<link href="../App_Themes/default/css/public.css" rel="stylesheet" type="text/css" /

<!--自适应手机页面-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="msapplication-tap-highlight" content="no" />

<script src="../App_Themes/default/js/jquery-1.9.1.min.js" type="text/javascript"></script>

<div class="page onlinebooking">

<div class="mask"></div>
<div class="pop">
<p>来源</p>
<p><input type="radio" checked="checked" />微信公众号</p>
<p><input type="radio" />中介</p>
<p><input type="radio" />朋友介绍</p>
<p><input type="radio" />传单</p>
<p><input type="radio" />其他</p>
<p style="border:none;">
<input type="button" value="确 定" />
</p>
</div>

</div>

css:

.onlinebooking .mask
{
width: 100%;
height: 100%;
background: #000;
opacity: .3;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}

.onlinebooking .pop
{
width: 240px;
height: 16rem;
background: #fff;
font-size: 62.5%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -118px;
z-index: 10;
}

.onlinebooking .pop p
{
width:100%;
line-height:2.8em;
vertical-align:middle;
padding: 0 1em;
box-sizing: border-box;
border-bottom:1px solid #eee;
}

.onlinebooking .pop p input[type="radio"]
{

margin-right:.5em;
position:relative;
top:2px;
-webkit-appearance: radio;

}

.onlinebooking .pop p input[type="button"]
{
width:100%;
line-height:2.5em;
margin-top:1em;
background-color:#B380B5;
border:none;
text-align:center;
vertical-align:middle;
color:#fff;
border-radius:.2em;
font-family: Arial, Microsoft YaHei;
font-size: 1em;
}

时间: 2024-10-22 17:29:39

用CSS3在手机上写弹出框,遮盖层的相关文章

自写简单弹出框

今天下午没事,就想起自己要写个弹出框试试.首先在网上搜了哈加上了自己的一些想法,结果达到了自己预想的结果. 实现原理: 1.在页面中创建一个div. 2.将此div的position设置为absolute,并设置其left.top.width.height属性. 3.设置此div的z-index为一个较大值,以保证覆盖弹出层底下的元素. 4.通过div的显示和隐藏达到弹出效果. 直接上代码吧!为了大家方便测试,我已经将js和css都放在html中了. 注意:需要自己引入jquery.min.js

插件 HOStringSense 可以在弹出框写NSString,所见及所得

https://github.com/holtwick/HOStringSense-for-Xcode 之前有几次需求要写换行的msg,有时候对不准,用这个插件非常方便.在弹出框里写完就是所见即所得.而且光标点到字符串的时候还会显示字符串的长度,这个功能我也很常用.

嫌弃浏览器自带弹出框,写个简单的jq自定义弹窗插件

最近做项目写个表单验证,提交信息验证有错误的时候,用了最懒的方法,直接把错误提示用alert()弹出框弹出来,于是老大看完后给了这个表情... 确实,自带弹窗样式丑不能自定义这些问题困扰着很多用户,而且在同浏览器有不同的表现, 有这样的:.. 有这样的:.. 还有这样的:.. 还有这样的: 相信做前端的都很熟悉这些面孔~ 不统一风格的弹窗直接拉低了整个网站的逼格.. 好,那就写个简单的JQ插件来装饰一下吧. JQ插件标准的封装代码如下,首先需要闭包: <script type="text/

jQuery+css3弹出框插件

先来看DEMO:https://codepen.io/jonechen/pen/regjGG 插件的开发很简单,运用了CSS3的动画效果,并且弹出框的内容可以自定义.插件的默认配置参数有三个: var defaults = { event: 'click', // 默认点击事件 dialogBox: 'selector', // 弹出框容器 hover: false, // 默认滑动事件关闭 } CSS部分: *{padding: 0; margin: 0; list-style: none;f

JS弹出框、对话框、提示框,JS关闭窗口、关闭页面和JS控制页面跳转

一.JS弹出框.对话框.提示框 //====================== JS最常用三种弹出对话框 ======================== //1弹出对话框并输出一段提示信息 function ale() { //弹出一个对话框 alert("提示信息!"); } //2弹出一个询问框,有确定和取消按钮 function firm() { //利用对话框返回的值 (true 或者 false) if (confirm("你确定提交吗?")) { a

一个简单的弹出框组件

个人写这个弹出框的原因就一个,就是能给我带来可复用,追求新,要简单,可扩展.要达到炫酷有点难度,分析后还是决定以功能为主,因为是用jq和animation实现的弹出框组件,所以看起来难度不大,简称co-dialog. 灵感来源,因为工作中用到dialog,发现UI设计的弹出框的风格一直在变化,于是每次都要重新写一个弹出框,无意中增加了无用的工作量,所以果断就封装成一个弹出框组件,目前的锥形仅支持PC,然后又加入了CSS3动画效果,如果要引入动画效果就需要高版本的Browser才能使用,期望你能一

iOS最好用的弹出框

重构项目时发现有的时候需要弹出提示,比如登录成功,数据请求失败,还有选择相机或者相册来上传头像等等. 今天就自己写了一个弹出框,采用的是系统的UIAlertController,只不过自己有定义了一些事件点击的方法,使用时可以直接输入提示的内容还有提供的选项以及点击选项时的事件. 使用方法: 先导头文件:#import "YZ.h" 或者 #import "YZ_Alert.h"都一样 然后: //只有一种选项按钮带提示的内容 [[YZ_Alert YZ] oneM

使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】

项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jQuery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js. jsonp快速入门: [原创]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例 关于jquery.ajax的jsonp方法是用以及其error回调函数不能正确执行,请参考园长dudu的文章: jquery ajax中使用jsonp的限制 jQuery插件jQu

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 使用jQuery前必须下载并引用jQuery的js文件,下载链接为h