編譯器：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>

最后放一張效果圖：

?

轉載于:https://www.cnblogs.com/mantishell/p/10834903.html

總結

以上是生活随笔為你收集整理的asp.net mvc 使用bootstrap的模态框插件modal的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。