bootstrap weebox 支持ajax的模态弹出框

Bootstrap是一套UI框架，其中Weebox是一个基于Bootstrap的模态弹出框插件，支持AJAX加载内容。本攻略将详细介绍如何使用Bootstrap Weebox插件实现AJAX加载内容的模态弹出框。

准备工作

1. 引入Bootstrap和jQuery库。

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

1. 引入Bootstrap Weebox插件。

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap-weebox/0.4.6/bootstrap-weebox.min.css">
<script src="http://cdn.bootcss.com/bootstrap-weebox/0.4.6/bootstrap-weebox.min.js"></script>

基本用法

Bootstrap Weebox插件基本用法如下：

$.weeboxs.open('http://example.com/content.html');

上述代码将以AJAX方式加载http://example.com/content.html并以模态弹出框的形式展示出来。

高级用法

Bootstrap Weebox插件还支持传递参数和回调函数。

参数传递

你可以在URL中传递参数，示例如下：

$.weeboxs.open('http://example.com/content.html?id=123&name=test');

或者使用对象传递参数：

$.weeboxs.open({
  url: 'http://example.com/content.html',
  onOpen: function() {
    // 模态框打开前的回调函数
  },
  onClose: function() {
    // 模态框关闭后的回调函数
  },
  title: '标题',
  type: 'ajax', // 指定打开方式为AJAX
  height: 400,
  width: 600
});

上述代码中，url参数指定加载内容的URL地址，onOpen和onClose参数指定了模态框打开前和关闭后的回调函数，title指定了模态框标题，type指定了打开方式为AJAX，height和width分别指定了模态框的高度和宽度。

回调函数

Bootstrap Weebox插件提供了多个回调函数，可以在模态框打开、关闭、内容加载完成等不同的状态下执行相应的操作。

$.weeboxs.open({
  url: 'http://example.com/content.html',
  onOpen: function() {
    console.log('模态框打开了');
  },
  onClose: function() {
    console.log('模态框关闭了');
  },
  onCallback: function() {
    console.log('内容加载完成了');
  }
});

上述代码中，onOpen和onClose分别在模态框打开和关闭时执行，onCallback在内容加载完成后执行。

示例说明

下面给出两个示例说明，分别展示了基本用法和高级用法。

示例一

基本用法示例，点击按钮弹出模态框，加载指定URL的内容。

HTML代码：

<button class="btn btn-primary" id="open-weebox">打开模态框</button>

JavaScript代码：

$(function() {
  $('#open-weebox').click(function() {
    $.weeboxs.open('http://example.com/content.html');
  });
});

示例二

高级用法示例，点击按钮弹出模态框，以AJAX方式加载指定URL的内容，并在加载完成后执行回调函数。

HTML代码：

<button class="btn btn-primary" id="open-weebox">打开模态框</button>

JavaScript代码：

$(function() {
  $('#open-weebox').click(function() {
    $.weeboxs.open({
      url: 'http://example.com/content.html',
      onCallback: function() {
        console.log('内容加载完成了');
      }
    });
  });
});

上述代码中，onCallback回调函数在内容加载完成后执行了一个简单的控制台输出操作。