本篇介紹的bootstrap weebox（支援ajax的模态彈出框），曆經多次修改，目前版本已經穩定，整合了bootstrap的響應式，界面簡單，功能卻無比豐富，支援ajax、圖檔預覽等等。
bootstrap提供了原生的模态框，但是功能很雞肋，食之無味棄之可惜，滿足不了大衆的彈出框需求，其主要缺點是不支援在模态框上彈出新的模态框，這很無趣。為了解決這個痛點，我特地研究了一個叫weebox的插件，這個原生的模态彈出框也不怎麼樣，使用起來有很多bug，尤其是不支援響應式。為了解決這兩個痛點，結合我的項目，特地整理出新的bootstrap weebox彈出框，支援響應式。
一、材料準備
bootstrap weebox
我把源碼放在了git上，友善大家下載下傳。
二、效果圖（彈出loading，加載頁面，确認後彈出error消息）
三、執行個體講解
①、加載資源
<!DOCTYPE html>
<html lang="zh-CN">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/components/common/taglib.jsp"%>
<head>
<title>雲夢-項目回報設定</title>
<link type="text/css" rel="stylesheet" href="${ctx}/components/weebox/css/weebox.css" />
<script type="text/javascript" src="${ctx}/components/weebox/js/bgiframe.js"></script>
<script type="text/javascript" src="${ctx}/components/weebox/js/weebox.js"></script>
</head>
<body>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<a href="${ctx}/deal/initAem/${id}" target="dialog" class="btn btn-primary" focus="type" width="600">
<span class="icon-plus"></span>
<span>新增項目回報</span>
</a>
</div>
</div>
<script type="text/javascript">
<!--
$(function() {
$("a[target=dialog]").ajaxTodialog();
});
$.fn.extend({
ajaxTodialog : function() {
return this.each(function() {
var $this = $(this);
$this.click(function(event) {
var title = $this.attr("title") || $this.text();
var options = {};
var w = $this.attr("width");
var h = $this.attr("height");
var maxh = $this.attr("maxh");
if (w)
options.width = w;
if (h)
options.height = h;
if (maxh)
options.maxheight = maxh;
var focus = $this.attr("focus");
if (focus) {
options.focus = focus;
}
options.title = title;
options.contentType = "ajax";
options.showButton = eval($this.attr("showButton") || "false");
options.showCancel = eval($this.attr("showCancel") || "false");
options.showOk = eval($this.attr("showOk") || "false");
options.type = "wee";
options.onopen = eval($this.attr("onopen") || function() {
});
options.boxid = "pop_ajax_dialog";
var url = unescape($this.attr("href")).replaceTmById($(event.target).parents(".unitBox:first"));
YUNM.debug(url);
if (!url.isFinishedTm()) {
$.showErr($this.attr("warn") || YUNM._msg.alertSelectMsg);
return false;
}
$.weeboxs.open(url, options);
event.preventDefault();
return false;
});
});
}});
//-->
</script>
</body>
</html> 你可能眨眼一看，怎麼沒有相關的彈出框呢，隻有個a标簽？當然了，如果你使用過dwz或者看過我以前的文章（例如Bootstrap summernote，超級漂亮的富文本編輯器），你可能對a标簽打開dialog就不會陌生。
通過$.fn.extend加載一個全局的ajaxTodialog 方法，在頁面初始化的時候，為a标簽執行該方法。
ajaxTodialog 的關鍵内容就是擷取a标簽指定的對話框options，比如title（文中為“新增項目回報”）、href（通過該指定的背景請求位址獲得remote的view試圖，加載到對話框中，後續介紹）、width（為weebox彈出框設定寬度）、foucs（設定打開時的焦點元件）。
當然還有其他的可選屬性，是否展示button等，然後将參數和url傳遞到weebox的open方法（核心，後續詳細介紹）。