一,背景
由于在项目中需要用到的一个页面效果是弹出框,在项目中我使用jquery的ui插件,来实现这个功能,用法也比较简单
二,准备环境
1)引入jquery插件。
在index.html中的头部加上,以下代码
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>这里给出的链接是直接copy 网站的,实测有效
2)在Index.html加上承载弹出呈的标签
<div id="dialog" title="基本的对话框"> <p>这是一个默认的对话框,用于显示信息。对话框窗口可以移动,调整尺寸,默认可通过 'x' 图标关闭。</p> </div>此段标签,再用下面的js进行隐藏
3)添加js文件,初始化对话框
<script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); </script>以上的js的作用是初始化对话框,默认对话框不显示,点击时候显示。
OK,当然我还需要在对话框上增加按钮的功能
button:{
"Ok" : function(){
//逻辑处理
},
'Cancel':function(){
//关闭弹出框
jQuery(this).dialog("close");
}
}
三,正式代码
在项目中,我的需求是单击输入框,弹出一个对话框出来,选择数据,按下按钮然后进行提交,那么我把代码分成两部分。
1)触发事件弹出层
<div class="col-sm-6 col-xs-6"> <input class="form-control" name="attract" id="attract" type="text" value="{if empty($contract_data['id'])}单击选择招商人{else}{$contract_data['attract_name']}{/if}" readonly> <input name="attract-id" id="attract-id" type="hidden" value="{$contract_data['attract']}"> </div>
2)初始化弹出层
<div id="dialog-attract" title="招商人">loading...</div>
<script> jQuery(function () { jQuery('#attract').click(function () { jQuery("#dialog-attract").dialog("open"); jQuery("#dialog-attract").load("url"); return false; }); jQuery("#dialog-attract").dialog( { modal:true, autoOpen:false, width: 800, maxHeight: 400, buttons:{ 'Ok':function () { jQuery(this).dialog('close') }, 'Cancel':function () { jQuery(this).dialog('close') } }, position:["center",100] } ); }); </script>
注意,弹出层的提交需要注意,尽量避开form表单的内嵌