javascript - Bootstrap 模式对话框出现在页面的一侧-6ren

javascript - Bootstrap 模式对话框出现在页面的一侧

转载作者：行者123 更新时间：2023-11-28 15:51:03

当我单击缩略图时，会出现一个模态对话框。我有一个带有基本 Bootstrap 网格布局的 js(从在线资源中获取)。

问题是 50% 的弹出窗口似乎卡在页面边缘之外。它似乎工作母鸡我减少页面的宽度。

我的代码如下(nb；你不需要js才能看到这个)

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1">
        <title>site name</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="logo" href="img/logo.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/main.css">

        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
    </head>
<body>

<div class="container">
    <div class="row">
        <div class="col-lg-4">
             <h1 class="page-header">Thumbnail Gallery</h1>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text" />
                </a>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>

                </button>
                 <h4 class="modal-title" id="image-gallery-title"></h4>

            </div>
            <div class="modal-body">
                <img id="image-gallery-image" class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <div class="col-md-2">
                    <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                </div>
                <div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
                <div class="col-md-2">
                    <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

enter image description here

最佳答案

下面的 fiddle 显示了模态工作。

与前面的答案一样，您应该查看 HTML 的结构。

https://jsfiddle.net/6zzrL8ow/1/

<div class="container">
    <div class="row">
        <div class="col-lg-4">
             <h1 class="page-header">Thumbnail Gallery</h1>

            <div class="col-lg-3 col-md-4 col-xs-6 thumb"> <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                    <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="Short alt text" />
                </a>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>

                </button>
                 <h4 class="modal-title" id="image-gallery-title"></h4>

            </div>
            <div class="modal-body">
                <img id="image-gallery-image" class="img-responsive" src="" />
            </div>
            <div class="modal-footer">
                <div class="col-md-2">
                    <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                </div>
                <div class="col-md-8 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
                <div class="col-md-2">
                    <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>

关于javascript - Bootstrap 模式对话框出现在页面的一侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31168059/

文章推荐： javascript - jquery匹配具有px样式字体大小的元素

文章推荐： html - 无法使从左到右的边框被覆盖

文章推荐： javascript - 如何用跨度包裹选定的单词

文章推荐： swift - 构建完美的 Swift 错误

graph - 允许在最大范围内到达所有其他顶点的最小顶点集。一侧
这可能是一个愚蠢的问题，但是要求图中顶点的最小集合的规范问题是什么，以便从这些顶点开始，所有其他顶点都可以通过“旅行”不超过一条边到达？现实生活中的应用是:我需要认识哪些人，才能与地球上的其他人仅通
html - 一侧 Angular 响应式标题
当浏览器在伪元素溢出并导致问题后调整绝对定位大小时。我正在寻找解决此问题的方法。只需调整浏览器大小，直到出现标题文本。这是问题的演示:http://codepen.io/anon/pen/grKNo
java - 内存耗尽 Xmx 和 Xms 一侧
我编写的 java 应用程序遇到了导致硬件性能问题的问题。问题(我相当确定)是我运行该应用程序的一些机器只有 1GB 内存。当我启动 java 应用程序时，我将堆大小设置为 -Xms 512m -Xm
java - JPA 2.1 ManyToOne，如果子实体是最后一个实体，则删除子实体(一侧)
Article 与 Medium 具有单向 ManyToOne 关系，它与下面的代码配合良好:保存和删除文章成功。我想知道 JPA 是否有一种优雅的方式来删除最后一个子实体(在本例中为medium)
ruby-on-rails - 通过关联在 has_many 上使用 simple_form 的单选按钮，特别是在关联的belongs_to 一侧
我想弄清楚如何在我的预约表格中将医生列表作为radio_buttons。现在，如果我使用“f.input :physician_id, :as => :radio_buttons”，我会得到一个“是/

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Bootstrap 模式对话框出现在页面的一侧