cs开发中，会有大量的子窗体，有模态的也有非模态的，有普通的提示框、确认框，也有包含复杂的输入控件，非常灵活。那么bs开发中，如何实现同样的效果呢？
网上搜了一下，有大量的JQuery对话框的插件，比较后发现最灵活的插件是JQuery Confirm，网上下载后可以查看demo。用法比较简单，这里说一下对话框加载动态网页的实现方式。
引入的js和css：
<link rel="stylesheet" href="demo/libs/bootstrap.min.css">
<link rel="stylesheet" href="demo/libs/bootstrap-theme.min.css">
<script src="demo/libs/jquery.min.js"></script>
<script src="demo/libs/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-confirm.css" />
<script type="text/javascript" src="js/jquery-confirm.js"></script>
引入的js和cs：bootstrap的css文件、jquery的js文件、bootstrap的js文件、jquery-confirm的css文件、jquery-confirm的js文件。
下面看看如何点击按钮调用对话框，及其设置。
<body>
<div class="container">
<div class="col-md-4">
<button class="btn btn-primary btn-block example-p-2">Load Dymanic page</button>
<div id="selectedValue"></div>
</div>
</div>
</body><script type="text/javascript">
$(function () {
$(".example-p-2").on('click', function () {
$.confirm({
columnClass: 'col-md-10 col-md-offset-2',
content: 'url:table.html',
title: 'Title',
contentLoaded: function (data, status, xhr) {
var self = this;
setTimeout(function () {
$("#btnTest").addClass("btn").addClass("btn-primary");
}, 1000);//加载后1秒在执行，如果直接执行或时间太短，则设置不生效
},
confirm: function () {
var value = $("#table tr td :checked").parent().parent().children().next().html();
$("#selectedValue").html("你选中的内容是：" + value);
},
});
});
});
</script>按钮点击，调用$.confirm函数启动对话框，其中content参数中可以指定静态html内容，也可以指定一个url地址，这里为url:table.html；contentLoaded参数指定内容加载后执行的函数，在这个函数中可以编写函数调整对话框中界面的内容，需要注意的是，直接对对话框中界面的调整是不生效的，这里延时1秒钟在执行。为验证效果，简单的设置加载页面中的按钮的class属性。confirm参数指定用户点击确认按钮后执行的函数，这里可以获取动态加载页面中的任意内容。
本例子是在对话框中加载一个table，用户可选择其中一项，点击确认按钮后，获取选中行的数据内容。
下面在看看table.html界面内容及注意事项。
由于table.html是动态加载到其他界面的，因此不能再引入css和js，但会自动使用父界面加载的样式和js。因此设计的时候可以指定bootstrap的css样式，编写js的时候直接调用jquery、bootstrap的js函数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<button id="btnTest">测试按钮</button>
<table id="table" class="table table-bordered table-condensed table-striped table-hover">
<tr>
<th>
选择
</th>
<th>
Name
</th>
<th>
City
</th>
<th>
Company
</th>
</tr>
<tr class="danger">
<td><input type="radio" name="selected" value="0" /></td>
<td>Adara</td>
<td>
Arquata del Tronto
</td>
<td>
At Nisi Cum LLP
</td>
</tr>
<tr>
<td><input type="radio" name="selected" value="1"/></td>
<td>Heather</td>
<td>
Springfield
</td>
<td>
Lorem Ipsum Dolor Associates
</td>
</tr>
<tr>
<td><input type="radio" name="selected" value="2"/></td>
<td>Jenna</td>
<td>
Milton Keynes
</td>
<td>
Pharetra Nam Ac Institute
</td>
</tr>
</table>
<script type="text/javascript">
$(function () {
$("tr").slice(1).click(function () {
$("tr").slice(1).removeClass("danger");
$(this).addClass("danger");
$("input[type='radio']").attr("checked", false).prop("checked", false);
$("input[type='radio']", this).attr("checked", true).prop("checked", true);
});
});
</script>
</body>
</html>这里需要注意的是：界面加载后的js，设置了table中tr点击事件，点击后清除所有tr的class属性danger，在给当前行设置danger属性；清除所有行中radio选中状态，给当前行中的radio设置为选中状态。如果要实现多选，把radio改为checkbox，修改一下即可实现。设置radio选中状态时attr和prop都可以，但有时会不生效，因此这里都进行了设置。
slice(1)去掉了table的表头，点击表头不能生效。