jQuery组件easyui对话框实现代码

本文实例为大家分享了

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Basic Dialog - jQuery EasyUI Demo</title>
 <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <link rel="stylesheet" type="text/css" href="demo.css">
 <script type="text/javascript" src="../jquery.min.js"></script>
 <script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body>
 <h2>基本对话框</h2>
 <p>单击打开或关闭对话框</p>
 <div style="margin:20px 0;">
 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">打开</a>
 <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>
 </div>
 <div id="dlg" class="easyui-dialog" title="基本 Dialog" data-options="iconCls:'icon-save'" style="width:400px;height:200px;padding:10px">
 有活就干，干完活吃饭，吃完饭睡觉.
 </div>
</body>
</html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery Dialog 弹出层对话框插件

    原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class

  • jQuery UI Dialog 创建友好的弹出对话框实现代码

    主要参数 jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3.mod

  • JQuery EasyUI 对话框的使用方法

    JQuery EasyUI 对话框的使用方法

    下面看一下EasyUI的对话框效果图 js代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> function Open_Dialog() { $('#mydialog').show(); $('#mydialog').dialog({ collapsible: true, minimizable: true, maximizable: true, toolbar: [

  • jQuery EasyUI API 中文文档 - Dialog对话框

    jQuery EasyUI API 中文文档 - Dialog对话框

    扩展自 $.fn.window.defaults,用 $.fn.dialog.defaults 重写了 defaults. 依赖 window linkbutton 用法 复制代码 代码如下: <div id="dd" title="My Dialog" style="width:400px;height:200px;"> Dialog Content. </div> 复制代码 代码如下: $('#dd').dialog(

  • Confirmer JQuery确认对话框组件

    Confirmer JQuery确认对话框组件

    插件截图: 用途:点击链接或按钮时要确认是否继续当前操作. 插件代码: 复制代码 代码如下: (function($){ $.fn.confirmer = function(options){ var defaults = { msg:"Are you sure to delete it ?" } var options = $.extend(defaults, options); var control=$(this); $(control).click(function(){ret

  • Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    复制代码 代码如下: //confirm function Confirm(msg, control) {    $.messager.confirm("确认", msg, function (r) {        if (r) {            return true;        }    });    return false;} 复制代码 代码如下: //Loadfunction Load() {    $("<div class=\"da

  • jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

    jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

    插件说明 - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Safari.Opera 等主流浏览器. 使用授权 - jBox 永久免费使用,但是必须保留相关的版权信息.如果有好的建议,可以直接在下面留言. 版本:2.3 大小:19.8k 下载:点击下载 在线demo:http://www.kudystudio.com/jbox/jbox-demo.html [2011-11

  • 修改jquery里的dialog对话框插件为框架页(iframe) 的方法

    修改jquery里的dialog对话框插件为框架页(iframe) 的方法

    jquery有个很不错的ui插件,dialog插件,他的官方网站上有各种形式的演示:http://jqueryui.com/demos/dialog/   ,可能大家用得比较多的还是它的默认模式,具体的用法官网上都有,也有中文的讲解地址,我就不再重复了,最近在弄弹出框架页,仔细一看,和dialog插件的modal form 模式很相似,demo演示效果:http://www.lovewebgames.com/addNews.aspx 就是这么个效果,要进行登录注册弹出层,至于为什么我不直接用mo

  • jquery删除提示框弹出是否删除对话框

    复制代码 代码如下: /** * 删除草稿 */ function deleteDraft(the,id){ $.messager.confirm('删除草稿提醒', '</br>确定删除这篇草稿吗?</br></br>',function(r){ if(r){ $.ajax({ type : "post", url : "http://localhost:8090/webplus3/_web/sns/delBlog.do?_p=YXM9M

  • 基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

    基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

    前不久在官方网站是看见这个插件,所以今天趁有空就看了一下,随便给大家共享一下.也许你早已知道了 ,如果是这样那请跳过,不要拍砖. 这个Jquery插件的目的是替代JavaScript的标准函数alert(),confirm(),和 prompt().这个插件有 如下这些特点: 1:这个插件可以使你可以支持你自己的css制定.使你的网站看起来更专业. 2:允许你自定义对话框的标题. 3:在IE7中,可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载. 4:这些方法都模拟

随机推荐