效果图：
注意引入的文件,js文件要在前面
Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Script/jquery-1.11.2.min.js"></script> <script src="~/bootstrap-3.3.5-dist/js/bootstrap.js"></script> <link href="~/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div> <input id="Button1" type="button" value="弹窗" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" /> </div> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" > </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> <input id="Text1" type="text" class="form-control"/> </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><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> </html>