📜  bootrap 模态 - C# (1)

📅  最后修改于: 2023-12-03 15:29:38.422000             🧑  作者: Mango

Bootstrap 模态 - C#

Bootstrap 模态框(Modal)是Web开发中常用的弹出层组件, 在C#中使用Bootstrap模态框可以方便地实现弹出层。

安装

首先需要在项目中引入Bootstrap框架。可以通过在HTML文件中引入Bootstrap的CDN链接:

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

或者直接下载Bootstrap,然后引入对应的CSS和JavaScript文件。

使用方法

Bootstrap模态框主要包含以下几个元素:

  • .modal: 最外层的模态框容器
  • .modal-dialog: 定义模态框的对话框框体,包含模态框的内容和操作按钮等元素
  • .modal-content: 包含模态框的所有内容,包括头部、主体和底部三个部分
  • .modal-header: 模态框头部,通常包含关闭按钮和标题
  • .modal-body: 模态框主体,放置具体的内容
  • .modal-footer: 模态框底部,放置操作按钮

具体使用时,可以将这些元素嵌套在一起,实现自己需要的界面。

<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">模态框标题</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>
</div>

通过添加data-toggledata-target属性,可以让模态框触发按钮与模态框绑定。在上面的例子中,模态框触发按钮的data-target属性与模态框的id属性相同。

在C#中,可以在代码中动态地修改模态框的内容和属性。通过使用ClientScript.RegisterStartupScript方法,可以将JavaScript代码嵌入到HTML中,从而实现打开或关闭模态框。

protected void Button1_Click(object sender, EventArgs e)
{
    string script =
        @"<script type='text/javascript'>
            $(function () {
                $('#myModal').modal('show');
            });
        </script>";
    ClientScript.RegisterStartupScript(GetType(), "show", script);
}

在上面的例子中,通过modal('show')方法显示模态框。除此之外,还可以使用modal('hide')方法隐藏模态框。