$.ligerDialog弹出对话框

最新推荐文章于 2026-05-22 12:25:52 发布
转载 最新推荐文章于 2026-05-22 12:25:52 发布 · 1.2w 阅读 · 6
标签
#ligerDialog #弹出框
本文详细介绍LigerDialog插件的使用方法，包括各种对话框的调用方式、参数设置及示例代码，如alert、waitting、confirm、success等，并提供动态加载组件和css文件的技巧。

http://tw.kmust.edu.cn/js/plugins/dialog/index.html

 

对话框使用时可以使用动态加载，比如，下面显示一个弹框可以这样写：展开代码查看代码

打印?

1.//使用using函数动态加载需要的模块、js、css文件

2.using(['dialog','/js/drag.js'],function(){

3.    $.ligerDialog.success('内容');

4.});

运行



这样就可以在使用的时候去动态加载所需的js组件或css文件。为了简便起见，下面的例子就不用动态加载了，直接在$(document).ready();事先加载好，因为本页主要只列对话框的用法。页面比较复杂的时候可以使用动态加载技术。

 

插件方法列表

alert(content, title, type, callback(不必填))

  • 显示提示弹出框

waitting(content, delayMillions(可不填))

  • 关闭对话框

confirm(title, content, callback)

  • 确定框

confirmDelete(p)

  • 确定框

error(title, content, callback)

  • 显示失败弹出框

open(p)

  • 弹窗打开方法，核心方法，弹窗所有方法都需要调用这个方法

prompt(title, value, multi, callback)

  • 输入框

question(title, content, callback)

  • 显示问题弹出框

success(title, content, callback)

  • 显示成功弹出框

warn(title, content, callback)

  • 显示警告弹出框

ajaxFormSubmit(p)

  • ajax表单提交

postComment(contentId, parentElement, url, data)

  • 留言评论

插件方法详细

{jQuery} Alert(content, title, type, callback(不必填))

  • 显示提示弹出框,

描述:

例子:

1.简单对话框查看代码打印?

1.$.ligerDialog.alert('内容');

运行

2.带图标的对话框查看代码打印?

1.$.ligerDialog.alert('成功！','提示','success');

运行

3.带回调对话框查看代码打印?

1.$.ligerDialog.alert('成功！','提示','success',function(){alert('成功！');});

运行

参数名类型描述默认值
content{String}内容 
title{String}标题(不必填,第二个参数，可替换为callback) 
type{String}类型 (不必填,第三个参数，可替换为callback)默认为'none'，主要有'success','warn','error','question'
callback(不必填){Function}点击确定事件
  • 参数1：button
  • 参数2：dialog Dom object
  • 参数3：button index
 

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} Waitting(content, delayMillions)

  • 关闭对话框

描述:

例子:

1.倒计时弹出框(默认等待时间2秒)查看代码打印?

1.$.ligerDialog.waitting('马上关闭');

运行

2.倒计时弹出框(自定义等待时间)查看代码打印?

1.$.ligerDialog.waitting('3秒后关闭',3000);

运行

参数名类型描述默认值
content{String}提示内容 
delayMilliions{Integer}倒计时时间(毫秒)默认2000

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} confirm(title, content, callback, type)

  • 确定框

描述:

例子:

1.基本确认对话框查看代码打印?

1.$.ligerDialog.confirm('确定？',function (r)

2.{

3.alert(r ? '您点击了Y' : '您点击了N');

4.});

运行

2.可以隐藏图标的确认对话框查看代码打印?

1.$.ligerDialog.confirm('确定？','提示',function (r)

2.{

3.alert(r ? '您点击了Y' : '您点击了N');

4.},'none');

运行

3.带html的内容提示查看代码打印?

1.$.ligerDialog.confirm("<span style="color: red;">确定？</span>",function (r)

2.{

3.alert(r ? '您点击了Y' : '您点击了N');

4.});

运行

参数名类型描述默认值
title{String}标题 
content{String}内容 (不必填,第二个参数，可替换为callback) 
callback{Function}点击确定事件
  • 参数1：是否点击了确定
 
type{String}图标类型,主要用于提示内容是html的情况，填'none'可以隐藏图标用此参数时，方法第二个参数必填且不能作为function

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} confirmDelete(p)

  • 确定框删除框

描述:

例子:

1.默认删除一个li标签查看代码打印?

1.$.ligerDialog.confirmDelete({elObj:$('#news1')});



2.可自定义标题内容查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news2'),

3.    title:'自定义标题',

4.    content:'确定？'

5.});



3.消失背景色，边框粗细、样式、颜色自定义查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news3'),

3.    disBackColor:'pink',//淡出效果提示容器背景色

4.    borderWidth:5,      //边框

5.    borderStyle:'solid',//边框样式

6.    borderColor:'blue'  //边框颜色

7.});

  • 操作成功！



4.删除后以提示框展示查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news4'),

3.    showAlert:true     //删除后是否弹出提示

4.});



5.自定义提示框消失时间查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news5'),

3.    content:'删完我0.2秒消失',

4.    delayMillions:200        //指定消失时间

5.});



6.自定义提示内容查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news6'),

3.    tips:'<span style="color: blue;">呵呵</span>'

4.});



7.指定提示内容为url展示查看代码打印?

1.dialog.confirmDelete({

2.    elObj:$('#news7'),

3.    contentUrl:'http://www.baidu.com',

4.    width:800,

5.    height:600,

6.    showIconType:'none'

7.});

参数名类型描述默认值
p.title{String}标题(可不填)
p.content{String}内容(可不填)
p.elObj{JQuery}必要参数，要remove的元素dom对象,最好通过$(el)包装成jQuery对象(必填参数)待讨论
p.showAlert{Bool}是否用弹出框提示返回内容,true:弹出框提示,false:页面提示(可不填)默认false
p.showIconType{String}指定提示图标类型(可不填)默认为question
p.disBackColor{String}提示消失的背景色(可不填)默认#ffffd7
p.borderWidth{Int}提示框边框宽度(可不填)默认1
p.borderStyle{String}提示框边框样式(可不填)默认solid
p.borderColor{String}提示框边框颜色(可不填)默认#ccc
p.delayMillions{Int}提示消失时间(可不填)默认1秒
p.tips{String}指定提示内容，可以html(可不填)
p.contentUrl{String}指定提示内容URL(可不填)

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} ligerDialogError(title, content, callback)

  • 显示失败弹出框，类似于alert(content,title,'error');

描述:

查看代码

打印?

1.$.ligerDialog.error('内容');

运行

例子:

参数名类型描述默认值
title{String}标题 
content{String}内容 (不必填,第二个参数，可替换为callback) 
callback{Function}点击确定事件
  • 参数1：button
  • 参数2：dialog Dom object
  • 参数3：button index
 

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} ligerDialogOpen(p)

  • 弹窗打开方法，核心方法，弹窗所有方法都需要调用这个方法

描述:

查看代码

打印?

1.$.ligerDialog.open({

2.width: 280,

3.type: 'error',

4.title:'对话框弹出演示标题',

5.content: '对话框弹出演示',

6.buttons: [{ text: '确定', onclick: function(item, dialog){alert('确定');dialog.close();} }, { text: '取消', onclick: function(item, dialog){dialog.close();}}]

7.});

运行

例子:

参数名类型描述默认值
p{Object}主要参数 
p.type{String}类型，包括success、donne、ok、error、warn、question""
p.cls{String}给dialog附加css classnull
p.id{String}给dialog附加idnull
p.isDrag{Bool}是否拖动true
p.isResize{Bool}是否调整大小true
p.allowClose{Bool}是否允许关闭true
p.width{Int}宽度280
p.height{Int}高度，默认自适应null
p.title{String}标题 
p.target{Object}目标对象，指定它将以appendTo()的方式载入null
p.url{String}目标页url，默认以iframe的方式载入null
p.load{Bool}是否以load()的方式加载目标页的内容false
p.modal{Bool}是否模态对话框true
p.name{String}创建iframe时 作为iframe的name和idnull
p.content{String}内容null
p.closeWhenEnter{String}按回车是否关闭对话框null
p.buttons{Array}按钮 
p.buttons[i].width{Int}宽度 
p.buttons[i].text{String}文本 
p.buttons[i].onclick{Function}显示完数据事件
  • 参数1：button
  • 参数2：dialog Dom object
  • 参数3：button index
 

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} Prompt(title, value, multi, callback)

  • 输入框

描述:

查看代码

打印?

1.$.ligerDialog.prompt('提示内容', function (yes, value)

2.                     {

3.                         if (yes) alert(value);

4.                     });

运行

例子:

参数名类型描述默认值
title{String}标题 
value{String}初始化值(不必填,第二个参数，可替换为callback或multi) 
multi{String}是否多行文本框(不必填,第三个参数，可替换为callback) 
callback{Function}点击确定事件
  • 参数1：yes 是否点击了是
  • 参数2：value 文本框输入的值
 

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} Question(title, content, callback)

  • 显示问题弹出框，类似alert(content,title,'question');

描述:

查看代码

打印?

1.$.ligerDialog.question('内容');

运行

例子:

参数名类型描述默认值
title{String}标题 
content{String}内容 (不必填,第二个参数，可替换为callback) 
callback{Function}点击确定事件
  • 参数1：button
  • 参数2：dialog Dom object
  • 参数3：button index
 

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} Success(title, content, callback)

  • 显示成功弹出框，类似alert(content,title,'success');

描述:

查看代码

打印?

1.$.ligerDialog.success('内容');

运行

例子:

参数名类型描述默认值
title{String}标题 
content{String}内容 (不必填,第二个参数，可替换为callback) 
callback{Function}点击确定事件
  • 参数1：button
  • 参数2：dialog Dom object
  • 参数3：button index
 

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} Warn(title, content, callback)

  • 显示警告弹出框

描述:

查看代码

打印?

1.$.ligerDialog.warn('内容');

运行

例子:

参数名类型描述默认值
title{String}标题 
content{String}内容 (不必填,第二个参数，可替换为callback) 
callback{Function}点击确定事件
  • 参数1：button
  • 参数2：dialog Dom object
  • 参数3：button index
 

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} ajaxFormSubmit(p)

  • ajax表单提交

描述:

查看代码

打印?

01.$.ligerDialog.ajaxFormSubmit({

02.    title:'模拟表单',

03.    formUrl:'/js/plugins/dialog/form1.jsp',

04.    formId:'form1',

05.    width:400,

06.    height:250,

07.    isFormReset:true,

08.    submitUrl:'/js/plugins/dialog/submit.jsp',

09.    redirectUrl:'http://www.baidu.com',       /*重定向地址，如果指定了tab，则指定tab页面被重定向*/

10.    btnSure:'提交',

11.    btnCancel:'关闭',

12.    tabObj:top.tab                            /*指定tab，tab为框架中定义的tab对象*/

13.    submitSuccessFunc:function(){

14.        alert('处理成功后执行自定义函数');

15.    }

16.});

运行

例子:

参数名类型描述默认值
p.title{String}标题null
p.formUrl{String}表单地址 
p.width{Int}宽280
p.height{Int}高null
p.formId{String}表单Idnull
p.submitUrl{String}表单提交地址null
p.isResetForm{Bool}是否表单重置false
p.redirectUrl{String}表单处理完重定向地址null
p.btnSure{String}确定按钮文字确定
p.btnCancel{String}取消按钮文字取消
p.tabObj{jQuery}指定tab对象null
p.submitSuccessFunc{Function}处理成功可以执行自定义函数,如果指定了自定义函数,则tabObj与redirectUrl参数将失效null

参数列表:

返回值:

{jQuery} jQuery对象

{jQuery} postComment(p)

  • 留言评论

描述:

查看代码

打印?

1.$.ligerDialog.postComment({

2.      contentId:'p_comment',

3.      parentElement:'comment',

4.      url:'submit.jsp?loginName=zwzhao&password=wisedu',

5.      data:'p_comment='+$('#p_comment').val()

6.});


 

  • 以后要常来哦~~
  • 踩踩~~

例子:

参数名类型描述默认值
contentId{String}文本框IDnull
parentElement{String}留言列表父容器idnull
url{String}提交地址null
data{String}额外提交数据null

参数列表:

返回值:

{jQuery} jQuery对象

唱响星河
关注
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
01-21
[removed]        if(confirm(“确定要进行此操作吗？”))        {          alert(“把确定的事件写到这里吧！”);        }        else         {           alert(“如果取消，就写一个返回事件吧！”);        }[removed]       jQuery.ligerDialog.confirm(‘确定删除吗?’, function (confirm) {         if (confirm)         f_delete();      });===================
ligerUI的ligerDialog关闭刷新的方法
10-16
今天小编就为大家分享一篇ligerUI的ligerDialog关闭刷新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
别再让VmmemWSL吃光你的内存！手把手教你用.wslconfig给WSL2+Docker套上“紧箍咒”
最新发布
weixin_30608503的博客
05-22 762
本文详细介绍了如何通过配置.wslconfig文件优化WSL2和Docker的内存使用，解决VmmemWSL进程占用过高的问题。从内存管理机制到具体参数设置，再到Docker专项优化，提供了一套完整的解决方案，帮助开发者提升系统性能和工作效率。
jQuery LigerUI
05-22
jQuery LigerUI V1.1.8 内含JQ UI 层展示源码。方便学习jQuery UI 的页面展示。
ligerDialog的展现
hugaozhuang的专栏
07-26 1万+
基本属性，可以参考ligerDialog.js文件，其中$.ligerDefaults.Dialog介绍了其所有属性和含义。   1.在基本页的代码如如下：         输入关键字:                  仅查询我参与的流程      展现如下图：   2.进行样式的添加 $.ligerDialog.open({         target: $("
ligerDialog的使用
weixin_30784141的博客
07-15 532
1.通过ViewBag来传值。 　　@if (ViewBag.ReturnMessage != null) 2.脚本代码： 对话框设计与赋值问题。 <script type="text/javascript"> $(function () { if (document.getElementById("dialog-BorrowInfo...
ligerUI调用$.ligerDialog后部分操作
qq_38308222的博客
11-02 1734
ligerUI调用$.ligerDialog后部分操作 所属分类：[界面编程]  | 创建时间：2015-01-16  | 文章属性：原创  | 文章来源：http://windfly.cn  | 作者：windfly   1：调用父窗口某一个文件框，获取焦点， parent.window.document.getElementById("roleName").focus(); 2：关闭...
ligerUI调用$.ligerDialog.open弹出窗
smile的博客
02-04 5772
1：调用父窗口某一个文件框，获取焦点， parent.window.document.getElementById("roleName").focus(); 2：关闭父窗口 parent.$.ligerDialog.close(); //关闭弹出窗 3：调用父窗口的gird刷新列表  parent.window.initBaseInfoGrid();//调父窗口某个方法
LigerDialog 弹出对话框的使用
whdmxl991的专栏
01-04 5013
http://tw.kmust.edu.cn/js/plugins/dialog/index.html
ligerUI调用$.ligerDialog.open弹出窗口，关闭后无法获取焦点问题
热门推荐
蓝缘
03-04 2万+
1：调用父窗口某一个文件框，获取焦点， parent.window.document.getElementById("roleName").focus(); 2：关闭父窗口 parent.$.ligerDialog.close(); //关闭弹出窗 3：调用父窗口的gird刷新列表  parent.window.initBaseInfoGrid();//调父窗口某个方法 4：移除父窗口
$.ligerDialog 操作
weixin_30340745的博客
09-20 442
//关闭 $.ligerDialog.open 打开的弹窗 frameElement.dialog.close(); //关闭父窗口 parent.$.ligerDialog.close(); //关闭弹窗 //父窗口一个组件获得焦点 parent.window.document.getElementById(“roleName”).focus(); /...
ligerDialog 中Open传值应用
刚哥的博客
05-28 3169
再ligerDialog中采用Open打开一个窗口对话框，在打开的窗口对话框中就会产生两个问题，父窗口给子窗口传值和子窗口给父窗口传值的问题。 其中父窗口给子窗口传值很简单，只要在父窗口中定义函数或者变量，然后子窗口通过parent.父窗口中的函数或者变量就可以了。 然后子窗口给父窗口传值，采用的方式是通过open中的buttons方法，来实现子窗口函数和变量的调用问题。 父窗口的内容： ...
JQuery弹窗的使用
whdmxl991的专栏
01-04 1291
$. ligerDialogOpen(p) 描述:弹窗打开方法，核心方法，弹窗所有方法都需要调用这个方法。   例子: $.ligerDialog.open({ width: 280, type: 'error', title:'对话框弹出演示标题', content: '对话框弹出演示', buttons: [ { text: '确定', onclick: function(ite
Js（JavaScript）中，弹出是或否的选择框示例！（confirm用法示例）
系统运维
12-10 935
&lt;script&gt; if(confirm("确定要进行此操作吗？")) { alert("把确定的事件写到这里吧！"); } else { alert("如果取消，就写一个返回事件吧！"); }&lt;/script&gt; jQuery.ligerDialog.confirm('确定删除吗?', function (confirm) { if (confir...
ligerUI的ligerDialog关闭刷新
chenbhhh的博客
03-14 6773
前几天写代码的时候用到了ligerUI的弹窗功能，然后需要在关闭弹窗的时候异步刷新页面，但是查看API的时候发现没有相关的时间或者方法。然后一个个查看参数，发现了一个叫“cls”的参数，可以自定义给dialog附加css class。就可以通过类选择器绑定该窗口，然后监听onclick事件即可。代码如下： 弹窗： var win1; if (win1) win1.show()
navTab链接扩展
C# 移动手机应用
03-06 4688
dialog链接扩展 A所指向页面将会在dialog 弹出层中打开，rel标识此弹出层的ID，rel为可选项。 Html标签扩展方式示例: 弹出窗口 或 打开窗口一   Max 属性表示此dialog打开时默认最大化, mask表示打开层后将背景遮盖. maxable: dialog 是否可最大化， minable:    dialog 是否
蓝缘基础框架项目-字典批量删除
张先生的博客
08-27 281
今天给大家介绍的是字典维护中的批量删除，页面列表图展示如下： 下面直接上前端逻辑代码： $("#deleteView").click("click", function() {//绑定删除按扭 var cbox=grid.getSelectedCheckbox(); if (cbox.length == 0) { parent.$.ligerDialog.alert("请选择删除项"); return; } parent.$.
dwz 个人学习笔记（二）dialog弹出框
阿昊的博客
07-18 3737
个人学习笔记，有不对的或者你又更好的，随时联系我，我们共同学习。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值