一，背景

由於在專案中需要用到的一個頁面效果是彈出框，在專案中我使用jquery的ui外掛，來實現這個功能，用法也比較簡單

二，準備環境

1）引入jquery外掛。

在index.html中的頭部加上，以下程式碼

<linkrel="stylesheet"href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-1.9.1.js"></script><scriptsrc="//code.jquery.com/ui/1.10.4/jquery-ui.js"
 
></script>

2）在Index.html加上承載彈出呈的標籤

<divid="dialog"title="基本的對話方塊"><p>這是一個預設的對話方塊，用於顯示資訊。對話方塊視窗可以移動，調整尺寸，預設可通過 'x' 圖示關閉。</p></div>

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>

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表單的內嵌