当前位置：首页 > news >正文

创建dialog

news 来源：原创 2024/5/7 3:48:33

创建一个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>