博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery对话框基本配置
阅读量:5173 次
发布时间:2019-06-13

本文共 1545 字,大约阅读时间需要 5 分钟。

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

按钮

 buttons:{
            "确定":function(){},
            "取消":function(){$(this).dialog('close');}
          }
//点击其他按钮打开模态框
$(“#opener”).click(function(){
     $(#dialog).dialog(“open”);
}) 

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 }

});

 

参考链接:

-----原创文章,©版权所有,转载请注明标明出处:http://www.cnblogs.com/doinbean

转载于:https://www.cnblogs.com/doinbean/p/Jquery.html

你可能感兴趣的文章
基本算法概论
查看>>
jquery动态移除/增加onclick属性详解
查看>>
JavaScript---Promise
查看>>
Django基于admin的stark组件创建(一)
查看>>
C. Tanya and Toys_模拟
查看>>
springboot jar包运行中获取资源文件
查看>>
基于FPGA实现的高速串行交换模块实现方法研究
查看>>
Java Scala获取所有注解的类信息
查看>>
delphi ,安装插件
查看>>
case when then的用法-leetcode交换工资
查看>>
11.28.cookie
查看>>
BeanShell简介
查看>>
python字符串操作
查看>>
不同程序语言的注释和变量要求
查看>>
语言基础(9):static, extern 和 inline
查看>>
ES5_03_Object扩展
查看>>
bzoj 2600: [Ioi2011]ricehub
查看>>
创建数据库,表
查看>>
工厂模式
查看>>
计算机网络基础知识
查看>>