pc端弹框
pc弹框插件：http://aui.github.io/artDialog/doc/index.html#quickref-bubble
PC端，手机端，layui很好用，分页啥的：http://www.layui.com/demo/
手机弹框插件：
小弹框：
<div id="message" class=""><p id="msgTxt"></p></div>
function message(message){
//加蒙层，和大弹框一致，可以单独设计
// $("body").append("<div class='md-modal-overlay show' id='nyale'></div>");
var timer;
var ele = $( "#message" ).addClass( "show" );
$( "#msgTxt" ).html( message );
clearTimeout( timer );
timer = setTimeout( function() {
ele.removeClass( "show" );
//小弹框关闭，蒙层撤销
// $("#nyale").remove();
}, );
}
message("网络开小差，请稍后再试")
/*小弹框*/
#message{
width: .55rem;
height: .1rem;
/*line-height: 1.55rem;*/
bottom: %;
border-radius: 1px;
padding: 1em 1em;
font-size: .9em;
color: #fff;
z-index: ;
box-shadow: 1px 14px rgba(,,,.);
/*white-space: nowrap;*/
opacity: ;
visibility: hidden;
/*-webkit-transition: opacity .2s;*/
/*transition: opacity .2s;*/
-webkit-transform: translateX(-%);
-ms-transform: translateX(-%);
transform: translateX(-%);
text-align: center;
font-size: 16px;
border-radius: 6px;
}
#message.show {
visibility: visible;
opacity: ;
}
#loading, #message {
position: fixed;
background: rgba(,,,.);
left: %;
}
#msgTxt{
line-height:.55rem;
height: .1rem;
}
.show {
display: block!important;
}
/*小弹框结束*/
//蒙层
.md-modal-overlay {
position: fixed;
top: ;
left: ;
width: %;
height: %;
background: rgba(,,,.);
opacity: ;
visibility: hidden;
z-index: ;
-webkit-transition: all .3s;
transition: all .3s
}
.md-modal-overlay.blank,.md-modal-overlay.show {
opacity: ;
visibility: visible
}
.md-modal-overlay.blank {
background:
}
大弹框
<modal id="modal_fellSorry">
<div style="width: 13.45rem;height: 7.6rem;background-color: #fff;overflow: hidden;border-radius: 0.1rem;">
<img src="/cn.dingyueWeb.reader/activity/imgs/imh10qm_meiqiangdao_top.png" style="width: 9.3rem;height: 4.05rem;display: block;margin:0.75rem auto;">
<img src="/cn.dingyueWeb.reader/activity/imgs/imh10qm_meiqiangdao_btn.png" style="width: 4.725rem;height: 1.05rem;display: block;margin:0 auto;" class="okok">
</div>
</modal>
<modal id="modal_getSuccess">
<div style="width: 13.45rem;height: 7.6rem;background-color: #fff;overflow: hidden;border-radius: 0.1rem;">
<img src="/cn.dingyueWeb.reader/activity/imgs/img11_qiangdaole_top.png" class="qgl_top">
<p style="margin-bottom: 0.75rem;text-align: center;color:#2d2dfd;" id="getSuccessTxt">抢到了！书券已放入账户</p>
<img src="/cn.dingyueWeb.reader/activity/imgs/imh10qm_meiqiangdao_btn.png" style="width: 4.725rem;height: 1.05rem;display: block;margin:0 auto;" class="okok">
</div>
</modal> function fellSorry(){
$.modal({
showTitle: false,
class4modal: "modal-confirm",
animation: "scale",
render: function(ready, close) {
this.html($("#container").find("#modal_fellSorry").html());
this.delegate(".okok", "click touch", function(e) {
close();
//关闭弹窗显示已抢光
$("#qiangGuangle").show();
$("#guize").hide();
$("#lingqu").hide();
$("#yiguoqi").hide();
})
.delegate(".nono", "click touch", close);
}
});
} function getSuccess(val){
$.modal({
showTitle: false,
class4modal: "modal-confirm",
animation: "scale",
render: function(ready, close) {
$("#getSuccessTxt").html("抢到了！"+val+"书券已放入账户");
this.html($("#container").find("#modal_getSuccess").html());
this.delegate(".okok", "click touch", function(e) {
/*var webUrl = window.J_search.buildPurchaseAjaxUrl("/${packageName}/v3/recommend/payBook.do?params=1");
window.title = '精选';
window.location.href = webUrl;*/
close();
window.location.reload();
})
.delegate(".nono", "click touch", close);
}
});
}
大弹框css
modal {
display: none
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
height: auto;
min-width: 240px;
max-width: 90%;
max-height: 90%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index:;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
font-size: .7rem;
/*width: 50%*/
}
.md-modal .md-progress .md-progress-spinner {
top: 54px;
right: 14px
}
.md-modal>div {
position: relative;
margin: 0 auto;
background: #fff;
overflow: hidden
}
.md-modal-head {
margin:;
padding: 16px 16px 16px 24px;
font-size: 17px;
font-weight:;
text-align: left;
color: #fff;
background: #01a1df;
opacity: 1
}
.md-modal-content {
max-height: 480px;
padding: 24px;
overflow: auto
}
.md-modal-body {
position: relative;
overflow: hidden
}
.md-modal-action {
min-height: 52px;
padding: 0 24px;
margin-bottom:;
line-height: 52px;
border-top-color: rgba(0,0,0,.12);
overflow: hidden
}
.md-modal-close {
position: absolute;
top: 15px;
right: 20px;
border: none;
font-size: 24px;
color: #eee;
cursor: pointer;
z-index:;
-webkit-transition: .2s;
transition: .2s
}
.md-modal-close:hover {
color: #48cfad;
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
.md-modal-overlay {
position: fixed;
top:;
left:;
width: 100%;
height: 100%;
background: rgba(70,60,60,.5);
opacity:;
visibility: hidden;
z-index:;
-webkit-transition: all .3s;
transition: all .3s
}
.md-modal-overlay.blank,.md-modal-overlay.show {
opacity:;
visibility: visible
}
.md-modal-overlay.blank {
background: 0 0
}
.md-modal-animation-bottom-slide>div,.md-modal-animation-bottom>div,.md-modal-animation-fadein>div,.md-modal-animation-flip>div,.md-modal-animation-scale>div,.md-modal-animation-sign>div,.md-modal-animation-slide>div,.md-modal-animation-stick>div,.md-modal-animation-vertical>div {
opacity:;
-webkit-transition: all .3s;
transition: all .3s
}
.md-modal-animation-bottom-slide.show>div,.md-modal-animation-bottom.show>div,.md-modal-animation-fadein.show>div,.md-modal-animation-flip.show>div,.md-modal-animation-scale.show>div,.md-modal-animation-sign.show>div,.md-modal-animation-slide.show>div,.md-modal-animation-stick.show>div,.md-modal-animation-vertical.show>div {
opacity:;
visibility: visible
}
.md-modal-animation-bottom-slide {
top: auto;
bottom:;
left:;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
.md-modal-animation-bottom-slide>div {
-webkit-transform: translateY(30%);
-ms-transform: translateY(30%);
transform: translateY(30%)
}
.md-modal-animation-bottom-slide.show>div {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
.md-modal-animation-slide>div {
-webkit-transform: translateY(30%);
-ms-transform: translateY(30%);
transform: translateY(30%)
}
.md-modal-animation-slide.show>div {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
.md-modal-animation-scale>div {
-webkit-transform: scale(.4);
-ms-transform: scale(.4);
transform: scale(.4)
}
.md-modal-animation-scale.show>div {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
border-radius: 0.25rem;
}
.md-modal-animation-fadein {
overflow: hidden
}
.md-modal-animation-fadein>div {
visibility: hidden;
opacity: .4
}
.md-modal-animation-fadein.show>div {
visibility: visible;
opacity: 1
}
.md-modal-animation-stick {
top:;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%)
}
.md-modal-animation-stick>div {
-webkit-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%)
}
.md-modal-animation-stick.show>div {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
.md-modal-animation-flip {
-webkit-perspective: 1300px;
perspective: 1300px
}
.md-modal-animation-flip>div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(-70deg);
transform: rotateY(-70deg)
}
.md-modal-animation-flip.show>div {
-webkit-transform: rotateY(0);
transform: rotateY(0)
}
.md-modal-animation-vertical {
-webkit-perspective: 1300px;
perspective: 1300px
}
.md-modal-animation-vertical>div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-70deg);
transform: rotateX(-70deg)
}
.md-modal-animation-vertical.show>div {
-webkit-transform: rotateX(0);
transform: rotateX(0)
}
.md-modal-animation-sign {
-webkit-perspective: 1300px;
perspective: 1300px
}
.md-modal-animation-sign>div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-60deg);
transform: rotateX(-60deg);
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0
}
.md-modal-animation-sign.show>div {
-webkit-transform: rotateX(0);
transform: rotateX(0)
}
.md-modal-animation-bottom {
-webkit-perspective: 1300px;
perspective: 1300px
}
.md-modal-animation-bottom>div {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateY(100%) rotateX(90deg);
transform: translateY(100%) rotateX(90deg);
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%
}
.md-modal-animation-bottom.show>div {
-webkit-transform: translateY(0) rotateX(0);
transform: translateY(0) rotateX(0)
}
大弹框js
$.fn.modal = function( options ) {
var
template = [ "<div class='md-modal'>",
"<div style='height: 100%;'>",
"<div class='md-modal-head'></div><div class='icon-md-clear md-modal-close'></div>",
"<div class='md-modal-body'></div>",
"</div>",
"</div>",
"<div class='md-modal-overlay'></div>" ].join( "" ),
modal = $( template ),
close = function() {
$( document ).off( "keyup", closeByESC ).off( "click", closeByDocument );
options.onClose();
modal.removeClass( "show" );
setTimeout( function() { modal.remove(); }, 300 );
},
closeByESC = function( e ) {
27 === e.keyCode && close();
},
closeByDocument = function( e ) {
$( e.target ).hasClass( "md-modal-overlay" ) && close();
},
deferred = $.Deferred(),
show = function() {
var
head = modal.find( ".md-modal-head" ),
body = modal.find( ".md-modal-body" ),
overlay = modal.last();
/** ~Head~ */
options.showTitle ? head.html( options.title ) : head.hide().next().hide();
/** ~Body~ */
if ( options.render instanceof Function ) {
options.render.call( body, deferred, close );
} else {
body.html( options.render );
deferred.resolve();
}
modal.first().addClass( [ "md-modal-animation-" + options.animation, options.class4modal || "" ].join( " " ) );
/** Show the overlay */
overlay.addClass( options.mask ? "show" : "blank" );
/** Close the modal */
if ( options.closeByESC || options.closeByDocument ) {
var trigger = $( document ).add( modal );
true === options.closeByDocument
&& modal.off( "click", closeByDocument ).on( "click", closeByDocument );
if ( "boolean" === typeof options.closeByESC ) {
trigger.off( "keyup", closeByESC ).on( "keyup", closeByESC );
}
}
modal.delegate( ".md-modal-close", "click", close );
setTimeout( function() {
modal.first().addClass( "show" );
}, 100 );
if ( options.draggable ) {
var handle = options.draggable;
head.css( "cursor", "move" );
modal.drag( function( ev, dd ) {
$( this ).css( {
top: dd.offsetY,
left: dd.offsetX,
"width": modal.width(),
"height": modal.height(),
"-webkit-transform": "none",
"-moz-transform": "none",
"-ms-transform": "none",
"transform": "none",
} );
}, { handle: handle === true ? ".md-modal-head" : handle } );
}
modal.appendTo( document.body );
};
options = $.extend( {}, $.fn.modal.defaults, options || {} );
if ( this === $ ) {
options.target ? $( options.target ).on( "click", show ) : (options.autoShow && show());
/** Use a dom as trigger */
} else this.on( "click", show );
return {
open: show,
close: close,
$node: modal
};
};
$.fn.modal.defaults = {
title : "Modal",
showTitle : true,
mask : true,
draggable : false,
class4modal : "",
closeByESC : true,
closeByDocument : false,
animation : "slide",
render : "",
autoShow : true,
onClose : $.noop || new Function()
};
/** Export to $ */
$.modal = $.fn.modal;
pc端弹框的更多相关文章
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
PC端解决方案 pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果. 也就是说给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加 ...
- vue移动端弹框组件，vue-layer-mobile
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
- vue移动端弹框组件
最近做一个移动端项目,弹框写的比较麻烦,查找资料,找到了这个组件,但是说明文档比较少,自己研究了下,把我碰到的错,和详细用法分享给大家!有疑问可以打开组件看一看,这个组件是仿layer-mobile的 ...
- svelte组件：Svelte自定义弹窗Popup组件|svelte移动端弹框组件
基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
- vue3系列：vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件
基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...
- 移动端和PC端页面常用的弹出层
我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端 我们需在页面引入弹出框的样式和 ...
- 遇到的一个移动端从下往上过渡的弹框，在Android下过渡动画的优化问题。
优化之前: /* 分享弹框样式 */ .popUpDiv { width: 100vw; height: 100vh; transition: all 0.5s ease; position: fix ...
- 移动端ios升级到11及以上时，手机弹框输入光标出现错位问题
引起原因:弹框的定位采取position:fixed,而ios(safari)对定位属性position:fixed的解析不一致导致. 解决方案: 方案一 一开始上网找解决方案,找到如下处理方式.但存 ...
随机推荐
- 在dropDownList中实现既能输入一个新值又能实现下拉选的代码
aspx: <div id="selDiv" style=" z-index:100; visibility:visible; clip:rect(0px 110p ...
- iOS开发之-- 从当前隐藏导航界面push到下一个显示导航界面出现闪一下的问题
在修改项目代码的过程中,遇到一个问题,就是比如主页面的导航栏是隐藏的,但是需要push到别的页面,这个时候,会出现导航栏闪一下的情况, 下面是我写的一种方案,也就是在loadView这个生命周期函数中 ...
- String、StringBuffer与StringBuilder区别
1.三者在执行速度方面的比较:StringBuilder > StringBuffer > String 2.String <(StringBuffer,StringBuild ...
- mciSendCommand 音频视频播放命令函数
//打开设备 //typedef struct { //DWORD dwCallback; //指定一个窗口句柄 //MCIDEVICEID wDeviceID; //为成功打开的文 ...
- java基础---->final关键字的使用
这里介绍一些java基础关于final的使用,文字说明部分摘自java语言规范.心甘情愿这四个字,透着一股卑微,但也有藏不住的勇敢. Final关键字的说明 一.关于final变量规范说明 .A fi ...
- ios UITableView多选删除
第一步, - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath ...
- 《从零开始学Swift》学习笔记（Day 66）——Cocoa Touch设计模式及应用之通知机制
原创文章,欢迎转载.转载请注明:关东升的博客 通知(Notification)机制是基于观察者(Observer)模式也叫发布/订阅(Publish/Subscribe)模式,是 MVC( 模型-视图 ...
- SQL server 数据库升级版本问题解决办法
在升级或安装数据库的时候,会遇到数据库版本不对的问题,无论怎么升级,升级提示成功了,但打开数据库发现还是原来那个版本.甚至出现重装数据库之后,登陆页面已经提示安装的是新版本了,但登陆进去之后,发现数据 ...
- 160527、项目上线后session（远程session）
import java.io.Serializable;import java.util.HashMap;import java.util.Map;import java.util.UUID;impo ...
- CodeForces 24D Broken robot （概率DP）
D. Broken robot time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...