设置bootstrap modal模态框的宽度和宽度

野性酷女 2022-06-17 14:12 572阅读 0赞

(1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现

<div class="modal-dialog" style="width:600px">

(2) 修改高度和宽度最好的办法是修改modal-body中添加的控件，设置控件的大小，modal会自动适应。

例如

<div class="modal fade in" id="_modalDialog" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
         style="display: block;">
      <div class="modal-dialog" role="document" style="width: 680px;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="modalLabel">选择移动到的目录</h4></div>
          <div id="_modalDialog_body" class="modal-body">
                
            <div id="selectTree" class="ztree" style="height:300px;overflow:auto; "> 
            </div>
    
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

显示效果图

![Center][]

[Center]: /images/20220617/2629a62327f548f8b08b5fdf25a87e27.png

发表评论取消回复

表情：

评论列表（有 0 条评论，572人围观）

还没有评论，来说两句吧...

相关阅读

相关深入浅出bootstrap模态框modal.js

> 本篇博客参考https://v3.bootcss.com/javascript/\modals-examples 先上bootstrap官网瞅一眼: ![在这里插入图

￡神魔★判官ぃ/ 2023年05月21日 07:24/ 0 赞/ 34 阅读

相关 Bootstrap 模态框（Modal）插件数据传值

模态框具体代码如下：  <div class="modal fade" id="update" tabindex="-1

ゝ一纸荒年。/ 2022年07月30日 13:23/ 0 赞/ 318 阅读

相关关于BootStrap中Modal（模态框）使用心得

一、modal使用： 1.1、登录bootstrap官网，点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js，需要导入bootstrap

ゝ一纸荒年。/ 2022年06月18日 04:11/ 0 赞/ 397 阅读

相关设置bootstrap modal模态框的宽度和宽度

(1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 <div class="modal-dialog" style="width:60

野性酷女/ 2022年06月17日 14:12/ 0 赞/ 572 阅读

相关 Bootstrap 模态框（Modal）插件数据传值

模态框具体代码如下： \[html\] [view plain][] [copy][view plain] 1.  2.

朴灿烈づ我的快乐病毒、/ 2022年06月04日 00:50/ 0 赞/ 692 阅读

相关 Bootstrap模态框(Modal)插件

Bootstrap模态框(Modal)插件 1.定义模态框(Modal)是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独源的内容，可以在不离开父窗体的情况

深碍√TFBOYSˉ_/ 2022年05月28日 01:59/ 0 赞/ 338 阅读

相关 bootstrap 模态框modal

1. 使用前提: 加载mode.js或bootstrap.js或压缩版的 bootstrap.min.js 2. 两种触发显示: 通过 data 属性：在控制器元素（

亦凉/ 2022年05月24日 10:17/ 0 赞/ 410 阅读

相关 Bootstrap 模态框（Modal）插件

Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有

ゝ一纸荒年。/ 2022年03月21日 12:28/ 0 赞/ 429 阅读

相关 bootstrap--模态框-圆角设置

.modal-content 旁边加上style属性 style="border-radius:5px" 5px表示倒角的大小也可以直接给input加属性一样

快来打我*/ 2022年02月20日 20:48/ 0 赞/ 264 阅读

相关设置bootstrap modal模态框的宽度和宽度

(1)修改宽度可以通过修改`modal`中的`modal-dialog`这个`div`宽度实现 <div class="modal-dialog" style="wi

ゝ一世哀愁。/ 2021年06月26日 16:06/ 0 赞/ 922 阅读