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

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

[html] view plaincopy

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

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

例如

[html] view plaincopy

<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>

显示效果图

转载于:https://www.cnblogs.com/telwanggs/p/7421824.html

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

修改bootstrap modal模态框的宽度
修改bootstrap modal模态框的宽度修改的不是modal这个大div 而是modal-dialog这个会话div <div class="modal fade" ...
关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
纯html点击按钮弹出表单,Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如 ...
黄聪：bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
【bootstrap】modal模态框的几种打开方法+问题集锦
第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...
bootstrap多层模态框嵌套问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
Bootstrap中模态框多层嵌套时滚动条问题
在使用Bootstrap中模态框过程中,如果出现多层嵌套的时候,如打开模态框A,然后在A中打开模态框B,在关闭B之后,如果A的内容比较多,滚动条会消失,而变为Body的滚动条,这是由于模态框自带的遮罩 ...
轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览源码下载实现的代码. html代码: <se ...
Bootstrap学习(七）modal模态框、data属性、过渡事件、滚动监听事件
模态框模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. <div class=" ...

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

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

最新文章

热门文章