Jquery对话框基本配置
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC" }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC"; color: #494949 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Arial; color: #494949 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px "Helvetica Neue"; color: #ffc66e }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px "Helvetica Neue"; color: #6a8759 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #9876aa }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #a9b7c6 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New" }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Courier New"; min-height: 14.0px }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #666600 }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #ffc66e }
p.p14 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #6a8759 }
p.p15 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #cc7831; min-height: 18.0px }
span.s1 { font: 18.0px "Helvetica Neue" }
span.s2 { font: 14.0px Arial }
span.s3 { font: 14.0px "PingFang SC" }
span.s4 { color: #a9b7c6 }
span.s5 { color: #9876aa }
span.s6 { color: #cc7831 }
span.s7 { font: 15.0px Menlo }
span.s8 { font: 15.0px Menlo; color: #cc7831 }
span.s9 { font: 15.0px Menlo; color: #808080 }
span.s10 { font: 15.0px "PingFang SC"; color: #808080 }
span.s11 { color: #6a8759 }
span.s12 { font: 15.0px "PingFang SC"; color: #6a8759 }
span.s13 { color: #808080 }
span.s14 { color: #6897bb }
span.s15 { font: 14.0px "PingFang SC"; color: #494949 }
span.s16 { color: #666600 }
span.s17 { color: #008800 }
span.s18 { color: #006666 }
span.s19 { font: 12.0px "PingFang SC" }
span.s20 { color: #0433ff }
span.s21 { color: #ffc66e }
Jquery弹框以及常用参数配置 使用方法:
$.createDialog({
id : 'dialog', url:'/model/guide.html',//路由链接
title:'弹框案列',//标题 width : 700,
height : 620,
});
以上是基本的对话框,还有需求可使用以下参数配置:
autoOpen 初始化之后,是否立即显示对话框,默认为 true
modal 是否模式对话框,默认为 false
closeOnEscape 当用户按 Esc 键之后,是否应该关闭对话框,默认为 true draggable 是否允许拖动,默认为 true
resizable 是否可以调整对话框的大小,默认为 true
title 对话框的标题,可以是 html 串,例如一个超级链接。
position 用来设置对话框的位置,有三种设置方法
位置参数设置
position:一个字符串组成的数组,例如, ['right','top'],表示对话框将会位于窗口的右上角。
一个字符串,允许的值为 'center', 'left', 'right', 'top', 'bottom'. 此属性的默认值即为 'center',表示对话框居中。 2. 一个数组,包含两个以像素为单位的位置,例如,
var dialogOpts = {
position: [100, 100]
};
var dialogOpts = {
position: ["left", "bottom"]
};
堆叠
stack 对话框是否叠在其他对话框之上。默认为 true
zIndex 对话框的 z-index 值，一个整数，越大越在上面。默认 1000
对话框打开或关闭效果
当对话框关闭时的效果,默认为 null, 例如, hide: 'slide'
show 当对话框打开时的效果。默认为 null 添加动画:
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
对话框是否叠在其他对话框之上。默认为 true
对话框的 z-index 值,一个整数,越大越在上面。默认 1000
按钮
tips:去掉头部方法或者去掉右上角的关闭按钮。
$.createDialog({
closeOnEscape: false,//ESC关闭对话框
id : 'dialog',
url:'/model/guide.html',
width : 700,
height : 620,
open: function (event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();//去掉对话框右上角按钮
$('.ui-dialog-titlebar').hide();//去掉对话框头部title }
});
参考链接：Jquery对话框参数配置
-----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean
最新文章
- PhpStorm 快捷键大全 PhpStorm 常用快捷键和配置
- oracle 数据库Cmd命令导入导出
- 使用noConflict重命名jQuery对象
- http://debugjs.com/
- LINQ 嵌套查询
- 分析器错误 MvcApplication 找不到
- placeholder 解决UITextField中placeholder和text文本同时显示的问题
- Android--输入自动提示AutoCompleteTextView
- 【HDOJ】【3480】Division
- js给数字加三位一逗号间隔的两种方法（面试题）
- BZOJ1657: [Usaco2006 Mar]Mooo 奶牛的歌声
- Linux - 进程调度算法
- 转 Caffe学习系列(9)：运行caffe自带的两个简单例子
- selenium3 - Tomcat and jenkins
- java中的锁之AbstractQueuedSynchronizer源码分析（二）
- Mxonline3.6 在阿里云服务器上的部署（uwsgi nginx）
- java设计模式-----10、享元模式
- 可以简易设置文字内边距的EdgeInsetsLabel
- js封装插件【组件】三种方式，含es6新特性。
- PL/SQL编程—存储过程