关闭

动态创建弹出层并且弹出层额内容样式可自定义

标签: ajaxcallbackjavascript弹出层源码
404人阅读 评论(0) 收藏 举报
分类:

不知大家在开发中是否遇到这样的需求,在同一项目中需要弹出风格大致一致但是内容及样式有极大更改的大弹出层。引用插件太麻烦且样式和内容不是那么可控。今天我实现了一个动态创建弹出层的效果大概是这样的,在点击需要弹出层的按钮后动态创建一个弹出层,其样式和内容均可写在另外一个HTML页面通过AJAX请求得到,弹出层在页面居中。

先贴上jq源码,第一个参数代表请求的地址(也就是你写的html的地址),第二个参数是附加数据,第三个是数据类型在这里写html就好了,第三个是你设置的弹出层的宽高,也可以设置一个表示宽高均是此值,第四个参数代表回调函数:

function definedLayer(url,data,dataType,styleXY,callback){
if(!$(".alert-ui-yaler").size()){
$(document.body).append('<div class="alert-ui-yaler"></div>');
};
if(!$(".alert-ui-dialog").size()){
$(document.body).append('<div class="alert-ui-dialog"><span class="layer-dialog-close-btn" title="关闭"><i>*</i></span></div>');
}
var setWidth=null;
var setHeight=null;
/*根据设置的宽高值参数来设置值*/
if(styleXY&&typeof(styleXY)==='object'){
console.log(styleXY.length);
if(styleXY.length==2){
setWidth=styleXY[0];
setHeight=styleXY[1]
console.log(setWidth,setHeight);
}else{
setWidth=styleXY[0];
setHeight=styleXY[0]
}
}
//支持设置宽高的百分比
if(typeof(setWidth)=='string'&&setWidth.indexOf("%")>0){
setWidth=$(window).width()/100*(parseFloat(setWidth.replace("%","")));
}
if(typeof(setHeight)=='string'&&setHeight.indexOf("%")>0){
setHeight=$(window).width()/100*(parseFloat(setHeight.replace("%","")));
}
$(".alert-ui-dialog").attr("data-width",setWidth).attr("data-height",setHeight);
if(typeof(setWidth)!="number"&&typeof(setHeight)!="number"){
alert("输入的数字不是数字类型!");
$(".alert-ui-dialog").css({
"max-height":($(window).height()-40)+"px",
"height":($(window).height()-40)+"px",
"width":($(window).width()-40)+"px",
"left":"50%",
"margin-left":-(($(window).width()-40)>1000?$(".alert-ui-dialog").outerWidth():($(window).width()-40)/2)
})
}else{
alert("进入到这里判断!");
$(".alert-ui-dialog").css({
"max-height":($(window).height()-40)+"px",
"max-width":($(window).width()-40)+"px",
"height":setHeight=="auto"?($(window).height()-40)+"px":setHeight+"px",
"width":setWidth=="auto"?($(window).width()-40)+"px":setWidth+"px",
"left":"50%",
"margin-left":-(($(window).width()-40)>1000?setWidth/2:($(window).width()-40)/2)
})
   console.log($(".alert-ui-dialog").width(),$(".alert-ui-dialog").height());
}
data=data||{};
$.ajax({
type:"GET",
url:url,
async:false,
data:data,
dataType:dataType,
beforeSend:function(){
console.log("fasong");
},
success:function(data){
setTimeout(function(){
$(".alert-ui-dialog").append(data)
},50);
},
error:function(){
console.log("chucuo");
}
});
$(document).on("click",".layer-dialog-close-btn",function(){
$(".alert-ui-dialog").remove();
$(".alert-ui-yaler").remove();
   //关闭时弹出回调函数
  if(callback&&typeof(callback)==="function"){
    callback();
  }
})
}

接下来贴上css样式:

*{margin: 0;padding: 0;}
.alert-ui-yaler{width:100%;height: 100%;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 86;background: rgba(0,0,0,0.4);}
.alert-ui-dialog{position: fixed;top: 20px;background: #008B8B;z-index: 88;border: 5px solid pink;overflow-y: scroll;overflow-x: hidden;}
.layer-dialog-close-btn{position:absolute;top:0px;right: 0px;z-index: 99;font-size: 20px;width: 24px;height: 24px;cursor: pointer;text-align: center;background: red;display: inline-block;line-height: 24px;border-radius: 5px;


@media only screen and (max-width:1200px ) {
bottom:20px;

}

接着是调用弹出层的html页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layer.css" />
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="layer.js" ></script>

</head>
<body>
<button onclick="definedLayer('layer-test.html',{id:0},'html',[600,800])" >弹出层</button>
</body>
</html>

最后是你自定义的弹出内容是一个html代码片段:

<div class="con" style="width:800px;height: 1000px;background: yellowgreen;">1111</div>

需要给大家提醒的是基本功能已经有了,但是一些细节还需要完善,比如说调节窗口时对应弹出层位置变化等,还有更多处理bugger的地方尚未解决!我的博客里有对应源码下载!


0
0
查看评论

自定义弹出层居中并显示遮罩

1.自己先定义两个div,一个是用来放弹出层内容的,一个是用于设置遮罩层颜色的,一个触发显示弹出层的按钮 2.给两个div分别设置css样式,遮罩的样式主要有:position:fixed;z-index:2;background-color:#000;opacity:0.7;top:0;left...
  • luohuajiexiejuan
  • luohuajiexiejuan
  • 2014-12-12 10:29
  • 2258

一个非常好用的可拖动的jquery弹出层

不用解释直接上代码,代码有注释,不懂的话直接拿去用。这只是一个简单的效果,若要复杂的效果请参考http://www.hestudy.com/file/demo/tipswindown/页面挡下来。 js代码: $(document).ready(function(){ var dial...
  • mdcmy
  • mdcmy
  • 2012-07-10 17:54
  • 2349

可以移动的div弹出层

可移动的弹出框 <!-- * { padding:0; margin:0; } #upcontent { list-style-position: outside; list-style-image: none; list-style-type: none; } #upconten...
  • wxlkeepmoving
  • wxlkeepmoving
  • 2012-05-01 20:48
  • 3873

layer弹窗的一些样式问题

layer算现在比较火的前端框架了。由于本人审美太差,所以做前台基本都是凑(can)合(bu)凑(ren)合(du),于是就有了这篇博。昨天在改一个页面的弹窗样式的时候搞得我不要不要的,页面上有一个用来提示的layer弹窗,弹窗要给用户提示一个消息,还要提供给用户两个用来选择点击的按钮,layer弹...
  • ZTZY520
  • ZTZY520
  • 2017-01-12 10:30
  • 6189

DIV弹出层 可移动 可关闭,demo直接使用

DIV弹出层 可移动 可关闭,demo直接使用
  • netuser1937
  • netuser1937
  • 2017-02-08 08:52
  • 1097

[Layer] layui的弹出层用法记录

为了更方便自己的使用和查找,把常用的代码记录一下,省的老去翻文档了。 通用加载提示: layer.msg('加载中...',{icon: 16,time:false,shade:0.6}); 更多 //基础提示 document.getElementBy...
  • xianglikai1
  • xianglikai1
  • 2017-11-09 15:41
  • 941

弹出层layer的使用心得

今天写一个弹出层插件layer的使用心得,推荐仔细阅读官方API。主要是说明如何在弹出的页面里改变title。1.先附上主页面的代码:<%@ page language="java" contentType="text/html; charset=UTF-8&qu...
  • qq_36637705
  • qq_36637705
  • 2017-05-08 11:20
  • 654

ECSHOP属性选择弹出层修改

1.在commen.js中 找到function addToCartResponse(result)
  • GlatChen
  • GlatChen
  • 2014-08-01 22:34
  • 1387

设置弹出层样式

弹出层样式        figure {     width:144px; /*图片盒子宽度*/     height:153px; /*图片盒子高度*/     margin:20px 20p...
  • zhongqing_fzq
  • zhongqing_fzq
  • 2016-07-11 16:39
  • 131

弹出层,随意拖拽的网页弹出框JS特效

弹出层随意拖拽JS特效   body,div,h2{margin:0;padding:0;} body{background:url(/jscss/demoimg/201301/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:#333...
  • wellway
  • wellway
  • 2015-09-12 23:49
  • 2203
    个人资料
    • 访问:16128次
    • 积分:295
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:4篇
    • 译文:0篇
    • 评论:2条
    最新评论