jquery - 我希望在移动 View 中打开时全屏模式显示-6ren

jquery - 我希望在移动 View 中打开时全屏模式显示

转载作者：行者123 更新时间：2023-11-28 14:29:37

在我的网站中，我想在移动设备 View 中全屏显示模态。

我不知道媒体查询。所以请帮助我。

我应该在 css 中添加什么才能看起来像第二张图片？

我上传了两张图片。第一张图片是我目前在移动 View 中的模态第二张图片是关于我在移动 View 中实际想要的内容。

提前谢谢你。

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%)
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: hidden;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-header {
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #F7F8FA;
}
.modal-header .close {
    margin-top: 5px
}
.modal-header .back {
    margin-top: 5px
}
.modal-title {
    margin: 0;
    line-height: 1.42857143
}
.modal-body {
    position: relative;
    padding: 15px;
    height:350px!important;
    overflow-y:auto;
    overflow-x:hidden;
}
.modal-footer1 {
    padding:15px;
    border-top: 1px solid #e5e5e5;
    background-color: #F7F8FA;
}

<div id="step-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="content" hidden="" id="step-1">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="text-center">Hatchback car cleaning</h4>
                </div>
                <div class="modal-body">
                    <center>
                        <h4>Select the service you Need</h4>
                    </center>
                    <br/>
                    <div class="checkbox">
                        <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Quick Clean" name="select_service[]" checked="">&nbsp;&nbsp;&nbsp;Quick Clean
                                </div>
                            </div>
                        </label>
                    </div>
                    <hr/>
                    <div class="checkbox">
                        <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Exterior Cleaning" name="select_service[]">&nbsp;&nbsp;&nbsp;Exterior Cleaning
                                </div>
                            </div>
                        </label>
                    </div>
                    <hr/>
                    <div class="checkbox">
                        <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Interior Cleaning" name="select_service[]">&nbsp;&nbsp;&nbsp;Interior Cleaning
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
                <div class="modal-footer1">
                    <button type="button" class="btn btn-primary1 btn-block" id="step-1-next">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

modal look in mobile view I want to show modal in mobile view like this

最佳答案

试试这个:

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  -o-transform: translate(0, -25%);
  transform: translate(0, -25%)
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0)
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: hidden;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px
}

.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.modal-header {
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  background-color: #F7F8FA;
}

.modal-header .close {
  margin-top: 5px
}

.modal-header .back {
  margin-top: 5px
}

.modal-title {
  margin: 0;
  line-height: 1.42857143
}

.modal-body {
  position: relative;
  padding: 15px;
  height: 350px!important;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-footer1 {
  padding: 15px;
  border-top: 1px solid #e5e5e5;
  background-color: #F7F8FA;
}

@media(max-width:767px) {
  #step-modal {
    padding: 0px !important;
  }
  .modal-dialog {
    margin: 0px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#step-modal">Open Modal</button>
<div id="step-modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="content" id="step-1">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="text-center">Hatchback car cleaning</h4>
        </div>
        <div class="modal-body">
          <center>
            <h4>Select the service you Need</h4>
          </center>
          <br/>
          <div class="checkbox">
            <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Quick Clean" name="select_service[]" checked="">&nbsp;&nbsp;&nbsp;Quick Clean
                                </div>
                            </div>
                        </label>
          </div>
          <hr/>
          <div class="checkbox">
            <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Exterior Cleaning" name="select_service[]">&nbsp;&nbsp;&nbsp;Exterior Cleaning
                                </div>
                            </div>
                        </label>
          </div>
          <hr/>
          <div class="checkbox">
            <label class="form-check-label">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="checkbox" class="form-check-input" value="Interior Cleaning" name="select_service[]">&nbsp;&nbsp;&nbsp;Interior Cleaning
                                </div>
                            </div>
                        </label>
          </div>
        </div>
        <div class="modal-footer1">
          <button type="button" class="btn btn-primary1 btn-block" id="step-1-next">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>

View on JSFiddle

关于jquery - 我希望在移动 View 中打开时全屏模式显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54264882/

文章推荐： html - 在

文章推荐： javascript - 使用 Apps 脚本生成公钥/私钥 RSA

文章推荐： javascript - JS/ReactJS - 分配新变量会更改原始变量

文章推荐： jquery - 滚动回到窗口顶部时 scrollTop 位置不正确

java - Intellij Idea - 打开/打开 "programming assists"
我开始学习 Oracle JavaSE 认证考试。我创建了一个 IntelliJ Idea 项目来处理我的训练源代码。我想尽量减少 IntelliJ Idea 的帮助。我只想使用:颜色语法、终端选
delphi - 打开 Delphi 项目文件 - 打开 DPR 而不是现有的 DPROJ 文件有什么缺点吗？
默认情况下，.DPR 和 .DPROJ 的文件扩展名描述是相同的，因此在资源管理器中打开具有相同基本名称的项目文件时，两个文件描述都会列为“Delphi 项目文件”，这提供了一个选择开发人员 - 要打
android - 将(打开/关闭)按钮添加到(打开/关闭)抽屉导航的 Activity
我目前正在从 android 网站了解 Navigation Drawer，我正在使用他们的示例 http://developer.android.com/training/implementing-
vba - 打开/关闭标志以更改名称
我需要帮助。我在 A3:A500 列中有单词和数字我需要改变他们的名字。如果单元格包含单词“previ”，则如果单元格是数字，则将字母“p”放入新列中。如果它是一个词，那么不要放“p” ...就
VBA EXCEL在特定行上方添加空行[打开]
我正在尝试编写一些 VBA，它允许按钮添加一个空行，保持相同的格式，就在 SUM 公式所在的行上方。到目前为止，我实现了创建一个空行，但我不知道如何实现代码以让该新行继承相同的格式样式(包括边框和格
excel - 打开/关闭工作簿并刷新连接
我在共享网络驱动器上有两个工作簿: 工作簿 A(表) 工作簿 B(数据透视表 - 连接到源工作簿 A) 我正在尝试，当打开 Workbook B 时，运行宏并执行以下操作: 取消保护工作簿 B 上的某
iPad模拟器+打开/关闭互联网
我正在开发一个需要在在线/离线模式下进行测试的应用程序，所以我想知道是否有任何方法可以打开/关闭 iPad 模拟器的互联网连接(不关闭我的 MAC 的互联网服务)。请帮忙最佳答案不，模拟器使用与您
perl - 打开/操作目录中所有文件的最有效方法是什么？
我需要对目录的所有文件执行我的脚本(搜索)。以下是有效的方法。我只是问哪个最好。 (我需要格式的文件名:parsedchpt31_4.txt) 全局: my $parse_corpus; #(for
iphone - 打开 'DEBUG'宏值
在我的代码中，我想有条件地执行一些操作: #ifdef DEBUG NSLog(@"I'm in debug mode"); #endif 我已配置“项目”->“编辑项目设置”->“构建”选项卡，以便
c# - 打开/关闭编译器优化标志的CPU密集型应用程序
我编写了一个小程序来比较笔记本电脑的性能。为了使程序CPU更加密集，我用一些多线程代码(通过Parallel API实现)实现了Rabin-Karp模式匹配算法。我注意到，当在关闭编译器优化标志的情
javascript - 模态关闭/打开
使用以下代码来关闭模态并打开第二个模态。总是遇到同样的问题可以关闭一个但不能打开第二个，或者如果我更改顺序我可以打开一个但不能关闭另一个。 (我想我已经尝试过101版本了)。如果有人能帮忙的话。
javascript - 打开/关闭鼠标悬停时显示的标题
blue sky 默认情况下，当指针悬停时显示标题。是否可以切换它，例如: $('#button').on('click', function(){ if (something) {turn
vba - 打开、保存和关闭任何文件
我正在编写一个简单的宏，它将打开、保存和关闭一个 Excel 文件(例如 myworkbook.xlsx)，但我无法执行此操作。我的文件 myworkbook.xlsx 位于以下位置: C:\User
leaflet - 打开/关闭图层时图层顺序发生变化
我正在加载两个 geoJson 层 - 出于测试目的，两个层都是相同的数据，但是是从两个不同的 json 文件中提取的。当我在图层 Controller 中打开和关闭图层时，图层的绘制顺序会发生变化。
java - 打开/关闭声音按钮不起作用
我在我的设置 Activity 中发现，当用户单击 ToggleButton 时，它应该在整个应用程序中静音，但它不起作用。我在教程类中放入的 SoundPool onClick 按钮声音仍在 onC
java - 打开/关闭给定网络的飞行模式。
我有一部双卡手机。如果我想打开飞行模式，两个 SIM 卡都会发生这种情况。是否可以通过编程方式仅对一张SIM卡进行操作(用户可以选择两者之一)？我看到了here上的帖子，他们一直工作到 API 16
c - 打开()一个文件并在最后写入
我目前正在开发一个带有一些 pipe() 和重定向的 C shell 程序。我使用 dup2() stdout 和 stderr (1 & 2) 重定向。当我用 int fd = open("te
jquery - 打开/另存为对话框
Jquery: 有没有办法捕获浏览器打开“打开/另存为”对话框时触发的事件？ Open/Save dialog example http://qpack.orcanos.com/helpcenter/
javascript - 如何关闭窗口.打开
我知道你可以用 window.close 关闭 window.open 但还有其他方法吗？我有一个打开 facebook 连接的弹出窗口，我想在用户连接到 facebook 时关闭弹出窗口，然后刷新父
c# - 打开/关闭显示电源时触发的事件
我搜索一个事件，如果不存在，则搜索一种方法来了解屏幕是否关闭(电源选项 - 控制面板 - 关闭显示设置)。这些解决方案都不适合我。所以要么我在某个地方错了，要么就是不合适。 How to get

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 我希望在移动 View 中打开时全屏模式显示