使用jQuery实现弹出框效果

一，背景

由于在项目中需要用到的一个页面效果是弹出框，在项目中我使用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表单的内嵌