asp.net mvc 使用bootstrap的模態框插件modal

編譯器：vs2012

jquery版本：jquery-1.10.2.js

bootstrap：bootstrap.js v3.0.0，包含modal插件

我們要實現一個使用模態框展示從服務器獲取的數據的功能。

一、首先在頁面上添加一個按鈕，用來觸發請求服務器數據，並打開模態框。

<button class="btn btn-primary" id="just-test">演示</button>

然后再添加一個外層的div，暫且讓我稱為容器吧。

<div class="modal fade" id="myModal" data-remote="/home/test"></div>

二、添加js代碼，添加事件處理

$('#just-test').click(function (e) {
    var $that = $(this);
    e.preventDefault();
    var url = $that.data('remote') || $that.attr('href');
    //第一種：激活模態框
    $('#myModal').modal();
    $('#myModal').load(url);
    //第二種
    $('#myModal').modal({
        remote:url
    });
});

三、控制器

public ActionResult Test()
{
    return PartialView();
}

頁面

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
        </div>
        <div class="modal-body">在這里添加一些文本</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            <button type="button" class="btn btn-primary">提交更改</button>
        </div>
    </div>
</div>

最后放一張效果圖：