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

編譯器：vs2012

jquery版本：jquery-1.10.2.js

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

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

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

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

而後再添加一個外層的div，暫且讓我稱爲容器吧。

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

2、添加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 }); });

3、控制器

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>

最後放一張效果圖：