jq最簡單的模態框「jquery模態框的特點」

在最後台頁面的時候，我們常常會用到一個彈層對話框來確認用戶的操作或者是獲取一些數據的輸入。在網上有些現成的插件是可以實現這個功能的，為了方便大家理解這個原理我們自己動手來實現這個效果。

我們以thinKphp框架下為例，做好以下幾個準備工作：

1、Jquery.js文件準備，下載好這個文件存放起來，最新版是 jQuery 3.3.1，這個百度一下就能找到下載地址。

2、準備頁面模板，也就是需要在上面彈出對話框的頁面，也叫父頁面。

3、準備彈層模板，這個彈層模板就是用來顯示提示用戶操作內容的頁面。

4、部署好THINKphp的框架，確保可以正常訪問渲染模板（這個請參考TP的部署教程），當然你也可以選擇不用這個，直接搭建http的訪問模式也是可以的。

做好以上準備工作以後我們來看一下關鍵代碼：

1、在父頁面添加文件引用，並在初始頁面的時候添加一個透明層，JS代碼片段如下

var msgboxhtm="<div class="msgbg" id="msgbg"></div>";
$("body").append(msgboxhtm);
$(".msgbg").hide();

$(".msgbox").find("h1").click(function(){$(".msgbg").hide();});

初始化的時候我們將這個層隱藏起來，第二段代碼是註冊一個對話框的關閉操作。

2、定義一個點擊事件，執行彈出命令，在這個邏輯里我們需要指定一url地址，指向需要彈出的模板（tinkphp就直接指向一個控制器就行了）。本例中geturl就是這個地址，這個地址使用get方式獲取數據。

$(".button").click(function(){
var action=$(this).attr("action");
var geturl=$(this).attr("geturl");
switch(action){
case"showdialog":
var result="";
$.get(geturl,function(result){
$(".msgbg").html(result);
});
$(".msgbg").fadeIn(500);
$(".msgbox").fadeIn(500);
break;
case"closebox":
$(".msgbg").hide();
break;
default:
break;
}
});

基本運行流程是：當我們單擊按鈕後，按鈕會讀取屬性值action，用來判斷當前的操作是否為彈出對話框操作，如果是的話就讀取geturl屬性值取得預設的對話框模板地址，然後提交給get方法獲取數據（這裡的get是Jquery封裝好的一個方法，是非同步獲取數據的一種），在回調函數里寫上獲取數據後的處理方式，將返回的數據填入動態添加的層里，並顯示出來，這樣就實現了彈層效果。是不是很簡單呢？

一下就是最終效果了