弹出层的html如下: <div id="floatBoxBg"></div>
<div id="floatBox" class="floatBox">
<div class="title"><h4>标题</h4><span>关闭</span></div>
<div class="content">内容</div>
</div>
css默认样式如下:#floatBoxBg{width:100%;height:100%;background:#000;filter:alpha(opacity=50);opacity:0.5;position:absolute;top:0;left:0;}
.floatBox{border:#666 5px solid;width:300px;position:absolute;top:50px;left:40%;}
.floatBox .title{height:23px;padding:7px 10px 0;background:#333;color:#fff;}
.floatBox .title h4{float:left;padding:0;margin:0;font-size:14px;line-height:16px;}
.floatBox .title span{float:right;cursor:pointer;}
.floatBox .content{padding:20px 15px;background:#fff;}
参数:
顺序
参数
功能
备注
1
title
弹出层的标题 |
必填,纯文本 |
2
content
弹出层的内容 |
:url |
get或post某一页面里的html,该页面要求只包含body的子标签 |
:text |
直接写入内容 |
:id |
显示页面里某id的子标签 |
:iframe |
层内内容以框架显示 |
3
width
弹出层的宽 |
必填,css值,比如“200px” |
4
height
弹出层的高 |
如上,但是可用“auto” |
5
cssName
弹出层的css |
给id floatBox加入的样式名,层内样式可以通过这个样式名来定制 |
相关下载:
下载最新版本jQuery
下载Lee dialog插件
下载默认css,应用时自行修改
应用:
dialog(title,content,width,height,cssName);
演示:
-
post提交表单返回信息$("#form1").submit(function(){
var str=escape($("#str").val());
dialog("我的标题","url:post?test.asp?str="+str+"","200px","auto","from");
return false;
});
试试
get加载一个.html文件(也可以是.php/.asp?id=4之类的) dialog("我的标题","test.html","200px","auto","text"); 试试
-
弹出纯文本内容 dialog("我的标题","text:我的内容","200px","auto","text"); 试试
-
弹出某id里面的html页面有<div id="testID" style="display:none;"><h2>Lee dialog</h2></div>
dialog("我的标题","id:testID","300px","auto","id"); 试试
Lee dialog
-
加载一个页面以框架示 把blueidea加载进来,定义css:body .iframe .content{padding:0;}复盖一下,因为.content默认padding:20px;
dialog("blueidea","iframe:http://www.blueidea.com","500px","500px","iframe"); 试试
分享到:
相关推荐
jquery 弹出层背景变暗 Lee dialog
各种android弹出dialog效果以及各种dialog样式各种android弹出dialog效果以及各种dialog样式各种android弹出dialog效果以及各种dialog样式各种android弹出dialog效果以及各种dialog样式各种android弹出dialog效果...
Dialog对话框,包括选择项Dialog,进度条Dialog,下载进度条Dialog
整理了常用的dialog 包括:single Choice Dialog Multiple choice Dialog Input Dialog Progress Dialog
dialog在Android开发中是非常常用的,但是系统自带的样式,有限,所以我们需要自定义dialog,定义出我们喜欢的样式。
使用纯javascript实现dialog
dialog为低功耗BLE的代表,此文档是开发DIALOG方案的指导文档
自定义对话框样式,以及对话框的加载动画,告别Android默认丑陋的对话框!
去掉 android dialog 白色边框
安卓Service中弹Dialog
自定义右上角带叉号的Dialog ,自定义布局的dialog,支持点击事件
Android自定义显示内容的Dialog,有两种实现方式,一个继承Dialog,一个继承PopupWindow。
Dialog是常用的一种Android控件,一般常用的形式有几种。
qml 用item自定义dialog 对话框 很好用的一个自定义对话框
用MVP写的一个自定义dialog,dialog里添加的recyclerView,item为一个滑动条的自定义控件,滑动dialog里的滑动条,会把值传递到activity中.
jquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialog
自定义的dialog,在图片的dialog 纯属学习@不足之处,请多谅解并指正
遮罩层弹出半透明dialog,很fashion。
底部弹出dialog 添加简单的进入 退出动画