Bootstrap模式在单击时显示空白屏幕

问题描述 投票：2回答：3

我试图使用锚标记在点击时显示bootstrap模态。当我点击小图片时，我想在页面here上使用Modal显示更大的图像。你能看看那个，看看实际问题是什么？

以下是我的代码

    <ul class="previews-list slides thumbs" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
                                                                                                    <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal1" data-toggle="modal" data-target="#mgsmodal1"><img alt="front without dupatta" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/1/01_1.jpg" draggable="false"></a></li>
<div id="mgsmodal1" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
<div class="magnify1">
<div class="large1"></div>
<img alt="front without dupatta" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/1/01_1.jpg" class="small1" draggable="false">
</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
                                                                                                <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal2" data-toggle="modal" data-target="#mgsmodal2"><img alt="front with dupatta" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/3/03_2.jpg" draggable="false"></a></li>
<div id="mgsmodal2" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
<div class="magnify2">
<div class="large2"></div>
<img alt="front with dupatta" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/3/03_2.jpg" class="small2" draggable="false">
</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
                                                                                                <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal3" data-toggle="modal" data-target="#mgsmodal3"><img alt="close up" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/2/02_1.jpg" draggable="false"></a></li>
<div id="mgsmodal3" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
<div class="magnify3">
<div class="large3"></div>
<img alt="close up" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/2/02_1.jpg" class="small3" draggable="false">
</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
                                                                                                <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal4" data-toggle="modal" data-target="#mgsmodal4"><img alt="side image " src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/4/04_1.jpg" draggable="false"></a></li>
<div id="mgsmodal4" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
<div class="magnify4">
<div class="large4"></div>
<img alt="side image " src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/4/04_1.jpg" class="small4" draggable="false">
</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
                                                                                                <li style="width: 76px; float: left; display: block;"><a href="#mgsmodal5" data-toggle="modal" data-target="#mgsmodal5"><img alt="" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/5/05.jpg" draggable="false"></a></li>
<div id="mgsmodal5" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
<div class="magnify5">
<div class="large5"></div>
<img alt="" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/5/05.jpg" class="small5" draggable="false">
</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
                                                                                            </ul>

模态打开但它只显示淡入的空白黑屏。它没有显示我放入模态的任何数据

jquery css twitter-bootstrap modal-dialog
3个回答
2
投票

问题是你的模态卡在列表项高度/宽度的限制范围内以及你在模态周围实现的所有其他类型的样式。

你应该以某种方式将模块放在<ul>之外的模块中。没有其他方法可以通过CSS重新解决这个问题。

尝试编辑模板。如果有可能从<li>和<ul>中获取模态 - 这将是一个容易解决的问题

1
投票

在这里，您可以使用https://jsfiddle.net/pzmygmz0/解决方案

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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.7/js/bootstrap.min.js"></script>
<ul class="previews-list slides thumbs" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
  <li style="width: 76px; float: left; display: block;">
    <a href="#mgsmodal1" data-toggle="modal" data-target="#mgsmodal1">
      <img alt="front without dupatta" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/1/01_1.jpg" draggable="false">
    </a>
  </li>
  <li style="width: 76px; float: left; display: block;">
    <a href="#mgsmodal2" data-toggle="modal" data-target="#mgsmodal2">
      <img alt="front with dupatta" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/3/03_2.jpg" draggable="false">
    </a>
  </li>
  <li style="width: 76px; float: left; display: block;">
    <a href="#mgsmodal3" data-toggle="modal" data-target="#mgsmodal3">
      <img alt="close up" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/2/02_1.jpg" draggable="false">
    </a>
  </li>
  <li style="width: 76px; float: left; display: block;">
    <a href="#mgsmodal4" data-toggle="modal" data-target="#mgsmodal4">
      <img alt="side image " src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/4/04_1.jpg" draggable="false">
    </a>
  </li>
  <li style="width: 76px; float: left; display: block;">
    <a href="#mgsmodal5" data-toggle="modal" data-target="#mgsmodal5">
      <img alt="" src="https://vastracode.com/media/catalog/product/cache/1/small_image/76x93/9df78eab33525d08d6e5fb8d27136e95/0/5/05.jpg" draggable="false">
    </a>
  </li>
</ul>    
  
<div id="mgsmodal1" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <div class="magnify1">
          <div class="large1"></div>
          <img alt="front without dupatta" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/1/01_1.jpg" class="small1" draggable="false">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="mgsmodal2" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <div class="magnify2">
          <div class="large2"></div>
          <img alt="front with dupatta" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/3/03_2.jpg" class="small2" draggable="false">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="mgsmodal3" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <div class="magnify3">
          <div class="large3"></div>
          <img alt="close up" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/2/02_1.jpg" class="small3" draggable="false">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="mgsmodal4" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <div class="magnify4">
          <div class="large4"></div>
          <img alt="side image " src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/4/04_1.jpg" class="small4" draggable="false">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="mgsmodal5" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>
      <div class="modal-body">
        <div class="magnify5">
          <div class="large5"></div>
          <img alt="" src="https://vastracode.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/0/5/05.jpg" class="small5" draggable="false">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

你的HTML结构错了，Modal container应该在ul之外

希望这会帮助你。

0
投票

快速而疯狂的方式！

使用下面的命令移动所有模态并将它们放在开头BODY标记处

$("body").children().first().before($(".modal"));
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.