Question

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

如何为上面的代码制作一个twitter bootstrap模态弹出窗口全屏，我尝试用css玩，但是无法按照我想要的方式获取它。任何人都可以帮助我。

Answer 1

我使用以下代码在Bootstrap 3中实现了这一点：

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

通常，当您对间距/填充问题有疑问时，请尝试右键单击（或cmd +单击Mac）元素并在Chrome上选择“inspect element”或在Firefox上选择“使用firebug检查元素”。尝试在“元素”面板中选择不同的HTML元素，然后实时编辑右边的CSS，直到获得所需的填充/间距。

<强> Here is a live demo

Here is a link to the fiddle

Answer 2

所选解决方案不保留圆角样式。要保留圆角，您应该稍微减小宽度和高度，并删除边框半径0.此外，它不会显示垂直滚动条...

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

Answer 3

以下课程将在Bootstrap中制作全屏模式：

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

我不确定你的模态的内部内容是如何构造的，这可能会对整体高度产生影响，具体取决于与之关联的CSS。

Answer 4

来自@Chris J的snippet有一些边距和溢出问题。 @YanickRochon和@Joana根据@Chris J的fiddel提出的更改可以在以下jsfiddle中找到。

这是适用于我的CSS代码：

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}

Answer 5

根据之前对此主题的回应（@Chris J，@ kkarli），我提出了一个响应＆＃34;响应＆＃34;全屏模态的解决方案：

全屏模式，只能在某些断点上启用。通过这种方式模式将显示＆＃34; normal＆＃34;更宽（桌面）屏幕和小屏幕（平板电脑或移动设备）全屏（），给人一种原生应用的感觉。

我创建了以下需要添加到.modal元素的类：

.modal-fullscreen-md-down - 对于小于1200px的屏幕，模式为全屏。

.modal-fullscreen-sm-down - 对于小于922px的屏幕，模式为全屏。

.modal-fullscreen-xs-down - 对于小于768px的屏幕，模式为全屏。

看看以下代码：

/* Extra small devices (less than 768px) */ @media (max-width: 767px) { .modal-fullscreen-xs-down { padding: 0 !important; } .modal-fullscreen-xs-down .modal-dialog { width: 100%; height: 100%; margin: 0; padding: 0; } .modal-fullscreen-xs-down .modal-content { height: auto; min-height: 100%; border: 0 none; border-radius: 0; } } /* Small devices (less than 992px) */ @media (max-width: 991px) { .modal-fullscreen-sm-down { padding: 0 !important; } .modal-fullscreen-sm-down .modal-dialog { width: 100%; height: 100%; margin: 0; padding: 0; } .modal-fullscreen-sm-down .modal-content { height: auto; min-height: 100%; border: 0 none; border-radius: 0; } } /* Medium devices (less than 1200px) */ @media (max-width: 1199px) { .modal-fullscreen-md-down { padding: 0 !important; } .modal-fullscreen-md-down .modal-dialog { width: 100%; height: 100%; margin: 0; padding: 0; } .modal-fullscreen-md-down .modal-content { height: auto; min-height: 100%; border: 0 none; border-radius: 0; } }

Codepen上提供了演示：https://codepen.io/andreivictor/full/KXNdoO。

使用Sass作为预处理器的人可以利用以下mixin：

@mixin modal-fullscreen() { padding: 0 !important; .modal-dialog { width: 100%; height: 100%; margin: 0; padding: 0; } .modal-content { height: auto; min-height: 100%; border: 0 none; border-radius: 0; } }

Answer 6

对于bootstrap 4，我必须使用max-width：none

添加媒体查询

@media (min-width: 576px) {
  .modal-dialog { max-width: none; }
}

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

Answer 7

您需要将DIV标记设置如下。

查找更多详情＆gt; http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>

Answer 8

对于引导程序 4.5：我只是将这段代码从 bootstap 5.scss 复制到了我的 sass 中，效果惊人：

@media (max-width: 1399.98px) 
  .modal-fullscreen-xxl-down 
    width: 100vw
    max-width: none
    height: 100%
    margin: 0
  
  .modal-fullscreen-xxl-down .modal-content 
    height: 100%
    border: 0
    border-radius: 0
  
  .modal-fullscreen-xxl-down .modal-header 
    border-radius: 0
  
  .modal-fullscreen-xxl-down .modal-body 
    overflow-y: auto
  
  .modal-fullscreen-xxl-down .modal-footer 
    border-radius: 0

对于 html：

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-xxl-down">
  ...
</div>

这一切都是为了控制右边 div 的边距、宽度和高度。

Answer 9

用于引导程序4

添加课程：

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

和HTML：

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">

Answer 10

.modal {
        padding: 0 !important;
    }
        .modal .modal-dialog {
            width: 100%;
            max-width: none;
            height: 100%;
            margin: 0;
        }
        .modal .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;
        }
        .modal .modal-body {
            overflow-y: auto;
        }

这对我来说是完美的工作方式非常感谢

Answer 11

**如果你想让Modal比普通的大那么不用写.css代码，我们可以直接写bootstrap modal的类**

<div class="modal fade" id="mappingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">

仅 modal-dialog modal-xl 并完成。

Answer 12

我对解决方案的变化：（scss）

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

（css）

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}

Answer 13

      folder_name  name    icon
  0   f1           aa      i1
  1   g1           bb      i2
  2   NAN          aadoq   i3
  3   NAN          bbaddd  i4

Answer 14

使用此：

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

等等：

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog modal-full">
        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header ">                    
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>

如何使Twitter引导模式全屏

14 个答案: