创建一个dialog有一下两种方式:

1、Data属性:DOM添加属性data-toggle="dialog"后,单机触发。

a链接打开:

<a href="json/menu-datagrid.json" data-toggle="sidenav" data-id-key="targetid">数据表格(Datagrid)</a>

按钮形式:

<button type="button" class="btn-green" data-toggle="dialog" data-id="mydialog" data-title="我的业务窗口" data-url="form/other.jsp">我的业务窗口</button>

参数集合方式:

 <button type="button" class="btn-green" data-toggle="dialog" data-options="{id:'mydialog',url:'form/other.jsp',title:'我的业务窗口'}">打开dialog</button>

加载容器中的内容:

<button type="button" class="btn-green" data-toggle="dialog" data-id="mydialog" data-target="#doc-dialog-target" data-title="加载容器中的内容">打开dialog</button>
<div id="doc-dialog-target" data-noinit="true" class="hide">
<p><input type="checkbox" id="doc-dialog-checkbox" data-toggle="icheck" data-label="测试Checkbox"></p>
<p><label>文本框:</label><input type="text" placeholder="文本框" size="25"></p>
<p><label>下拉框:</label><select data-toggle="selectpicker"><option value="1">选项一</option><option value="2">选项二</option></select></p>
</div>

回调函数:

<script type="text/javascript">
function doc_dialog_onLoad($dialog){
$dialog.alertmsg('info','onLoad回调:不填写工号是不能关闭本窗口的。');
}
function doc_dialog_beforeClose($dialog){
var code=$dialog.find("#doc-dialog-code").val();
if(code) return true;
$dialog.alertmsg('error','beforeClose回调:关闭弹窗前请先填写你的工号。');
return false;
}
function doc_dialog_onClose(){
$(this).alertmsg('info','onClose回调:你刚刚关闭了一个dialog。');
}
</script>
<button type="button" class="btn-green" data-toggle="dialog" data-target="#doc-dialog-target-callback" data-title="我的业务窗口"
data-on-load="doc_dialog_onLoad" data-before-close="doc_dialog_beforeClose" data-on-close="doc_dialog_onClose">
打开dialog</button>
<div id="doc-dialog-target-callback" data-noinit="true" class="hide">
<div class="text-center">
<h3>dialog回调函数示例</h3>
<hr>
<p><label>工号:</label><input type="text" name="code" id="doc-dialog-code"></p>
</div>
</div>

2、jqueryAPI

例子:

<script type="text/javascript">
function open_dialog(obj){
$(obj).dialog({id:'mydialog',url:'form/other.jsp',title:'我的业务窗口'});
}
</script>
<button type="button" class="btn-green" onclick="open_dialog(this)">打开dialog</button>

jquery方法代码:

$(selector).dialog(options);

取得当前dialog容器:$.CurrentDialog

创建dialog的更多相关文章

  1. vue+el-element中根据文件名动态创建dialog的方法

    背景 在项目中使用对话框的通常做法是把对话框封装成组件,在使用的地方引入,然后添加到template,使用visible.sync控制对话框的显示/隐藏,监听confirm事件处理用户点击确定.如下: ...

  2. easyUI创建dialog弹框

    1.在当前页面必须有一个DIV <!-- 保证金明细的详情列表显示 --> <div id="dialog-alarm-detail"></div&g ...

  3. Easyui 创建dialog的两种方式,以及他们带来的问题

    $('#yy').dialog('open');//打开dialog 这地方要注意,加入你关闭窗口的地方使用$('#yy').dialog('destroy');那么你这个dialog就只能使用一次, ...

  4. Android Dialogs(2)最好用DialogFragment创建Dialog

    Creating a Dialog Fragment You can accomplish a wide variety of dialog designs—including custom layo ...

  5. Android如何创建背景透明的Dialog

    一:控制Dialog 的背景方法:1.定义一个无背景主题主题<!--去掉背景Dialog--> <style name="NobackDialog" parent ...

  6. DialogFragment创建默认dialog

    代码地址如下:http://www.demodashi.com/demo/12228.html 记得把这几点描述好咯:代码实现过程 + 项目文件结构截图 + 演示效果 前言 在我们项目的进行中不可避免 ...

  7. Android自定义Dialog(美化界面)

    前言:在做项目的时候,发现dialog界面太丑陋,从csdn上下载了一份自定义dialog的源码,在他的基础上对界面进行美化...有需要的朋友可以直接拿走 效果图如下: 主要代码: /** * 自定义 ...

  8. Android 官方推荐 : DialogFragment 创建对话框

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37815413 1. 概述 DialogFragment在android 3.0时 ...

  9. 如何使用Service的Context弹出Dialog对话框,即全局性对话框

    在dialog.show()语句前加入: dialog.getWindow().setType(WindowManager.LayoutParams.TYPE_SYSTEM_ALERT); 然后在An ...

随机推荐

  1. 原!! java直接打印一个对象时,并不是直接调用该类的toString方法 ,而是会先判断是否为null,非null才会调用toString方法

    网上看了好多java直接打印一个对象时,直接调用该类的toString方法 . 但是: Object obj=null; System.out.println(obj);//没有报错 System.o ...

  2. java 多线程4(死锁)

    死锁现象: 死锁原因: 1.存在两个或两个以上的线程. 2.存在两个或两个或两个以上的共享资源. 死锁现象解决的方案: 没有方案只能尽量避免.

  3. 【Problem solved】发现输入法都是仅桌面使用,无法输入中文时

    你打开命令提示符输入CTFMON就可以啦.

  4. canvas打开本机摄像头

    (function () { var video = document.createElement("video"); video.autoplay="autoplay& ...

  5. 《javascript高级程序设计》 第24章 最佳实践 Best Practices

    24.1 可维护性 Maintainability24.1.1 什么是可维护的代码 What Is Maintainable Code?24.1.2 代码约定 Code Conventions 24. ...

  6. HTML5自学笔记[ 6 ]data自定义数据

    在标签中添加data-name属性并赋值,在js脚本中用ele.dataset.name就可以获取该属性的值.如: <div id="box" data-age=" ...

  7. Mybatis 学习-1

    本次MyBatis基础实例教程主要讲述MyBatis在项目中的配置方法,实体对象的关系映射.关联关系,以及如何实现一个BaseDao的功能 实例数据库的表结构 CREATE TABLE `blog_u ...

  8. IOS-错误总结

    1,警告:"xoxoxoxo"  is deprecated解决办法:查看xoxoxoxo的这个方法的文档,替换掉这个方法即可.2,警告:Declaration of " ...

  9. plot a critical difference diagram , MATLAB code

    plot a critical difference diagram , MATLAB code 建立criticaldifference函数 function cd = criticaldiffer ...

  10. 读取Cookie及Cookie所有属性操作方法

    读取Cookie及Cookie所有属性操作方法 2013-08-04 22:21:43|  分类: 技术 |  标签:cookie  |举报|字号 订阅   要把Cookie发送到客户端,Servle ...