Bootstrap 模态显示正确

【问题标题】：Bootstrap modal does show correctlyBootstrap 模态显示正确
【发布时间】：2016-04-22 09:39:09
【问题描述】：

我正在尝试通过单击按钮按需显示模式窗口。

在<head>...</head> 标签中，我有以下内容：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

在&lt;body&gt;...&lt;/body&gt; 中，我对模态标记有以下定义：

<div id="slideInfoModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="slideInfoTitle" class="modal-title">Modal Title</h4>
            </div>
            <div id="slideInfoBody" class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我的 javascript 按钮点击处理程序如下所示：

// Method to show current slide info
$(document).ready(function() {
    $('#slideInfo').click(function() {
        $('#slideInfoModal').modal();
    });
});

代码运行时，模态显示如下：

它应该看起来像这样（根据tutorial）：

知道为什么它看起来像wrong吗？

我确实加载了以下自定义 css 样式表：http://pastebin.com/6f9SUsiv

这是否会破坏引导模式？我正在使用的页面需要这些样式。

【问题讨论】：

  • 它和我一起工作。你能创建一个包含整个问题的 JSbin 吗？
  • 您发布的代码没有问题。我最终测试了它，它实际上正在工作。你可能对你的 css 做了一些可能干扰了 boostrap 的模态 css 的事情。

标签： jquery html css twitter-bootstrap bootstrap-modal


【解决方案1】：

我为您的问题中的代码制作了一个工作代码 sn-p，它适用于和不使用 pastebin CSS。

没有 jQuery 链接，就没有模态功能。

您在问题中包含的非工作模式的图像表明存在 CSS 问题。但也许这段代码 sn-p 将有助于找到解决方案。

$(document).ready(function() {
  $('#slideInfo').click(function() {
    $('#slideInfoModal').modal();
  });
});
html { height: 100% }
        body { height: 100%; margin: 0; padding: 0; position: relative; }
        #imageView { height: 100%; background-size: cover; display: none; }
        #progressViewDisplay { padding: 10% 60px 20px 60px; text-align: center; font-family: Arial; font-size: 36px; }
		#slideShowControls { position: absolute; top: 10px; right: 20px; width: 100%; height: 60px; line-height: 60px; text-align: right; display: none; }

.meter {
    height: 40px;
    position: relative;
    margin: 0 60px 60px 60px;
    background: #ccc;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 10px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
    display: block;
    height: 100%;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43, 194, 83);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
    background-image: -moz-linear-gradient( center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
    -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
.meter > span:after,
.animate > span > span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
    background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}
.animate > span:after {
    display: none;
}
@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}
@-moz-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<div id="slideInfoModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 id="slideInfoTitle" class="modal-title">Modal Title</h4>
      </div>
      <div id="slideInfoBody" class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<button id="slideInfo">Show</button>

【讨论】：

  • 这个问题真的很奇怪。我的模态 html 在下面，因此它不起作用。我在这里复制了这个问题：pastebin.com/dtjV4kEq（为了解决这个问题，我必须在&lt;body&gt; 标签之后移动模态 div。
【解决方案2】：

您使用 jQuery，并且您在此处显示的内容没有链接到 jQuery。 如果尚未完成，请尝试将其添加到您的头部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

【讨论】：

    猜你喜欢
    • 2016-04-06
    • 2019-07-27
    • 1970-01-01
    • 1970-01-01
    • 2015-01-31
    • 2020-02-20
    • 2021-08-17
    • 2021-10-15
    • 2015-01-16
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode