jquery - Bootstrap 模式确实显示正确

标签 jquery html css twitter-bootstrap bootstrap-modal

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

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

在<body>...</body>我对模态标记有以下定义:

<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();
    });
});

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

enter image description here

它应该看起来像这样(根据 tutorial ):

enter image description here

知道为什么会这样吗 wrong ？

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

这会破坏 Bootstrap 模式吗？我正在使用的页面需要这些样式。

最佳答案

我为您的问题中的代码制作了一个有效的代码片段，无论是否使用 pastebin CSS，它都可以正常工作。

如果没有 jQuery 链接，就根本没有模态功能。

您在问题中包含的非工作模式的图像表明存在 CSS 问题。但或许此代码片段有助于找到解决方案。

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

关于jquery - Bootstrap 模式确实显示正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36782884/

上一篇：Javascript onClick() 事件在动态使用时不起作用

下一篇：jquery - 带有滑动动画的 Bootstrap 水平下拉菜单

相关文章：

javascript - jquery 动画在 x 和 y 轴上滚动

javascript - 使用 Ajax (jquery) 调用 Deezer API - dataType JSON 返回 null - JSONP 返回错误

javascript - 本地目录查看器和从 Intranet 浏览器拖放

javascript - 更改最后的属性值

php - 使表单数据从多选表单保留在 PHP 页面上

jquery - CSS 过渡不适用于 ajax 内容

javascript - 根据另一个 JSON 值获取 JSON 对象

javascript - 检查列中的所有复选框

html - 垂直对齐 td 中的图像

html - 如何设置 HTML5 <meter> 标签的样式

©2024 IT工具网  联系我们