bootstrap gallery模态不起作用

时间:2018-03-06 04:58:34

标签: javascript twitter-bootstrap modal-dialog bootstrap-modal

我在使用这个基本的图片库和引导程序时遇到了麻烦,我认为我正确地完成了模式,但是当我点击并且希望它通过触摸或点击切换进出时没有任何反应。

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/564203131a.js"></script>
</head>
<body>
<div class="container gal-container">
<div class="col-md-8 col-sm-12 co-xs-12 gal-item">
  <div class="box">
    <a href="#modalID" data-toggle="modal">
      <img src="https://www.aussiespecialist.com/content/asp/en_gb/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg">
    </a>
    <div class="modal fade" id="1" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          <div class="modal-body">
            <img src="https://www.aussiespecialist.com/content/asp/en_gb/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg">
          </div>
            <div class="col-md-12 description">
              <h4>This is the first image in my Gallery</h4>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--  jQuery  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

和我的css

.gal-container{padding: 12px;}
.gal-item{overflow: hidden; padding: 3px;}
.gal-item .box{height: 350px; overflow: hidden;}
.box img{height: 100%; width: 100%; object-fit:cover; -o-object fit:cover;}
.gal-item a:focus{outline: none;}
.gal-item a:after{content:"\e003"; font-family: 'Glyphicons Halflings'; opacity: 0; background-color: rgba(0, 0, 0, 0.75); position: absolute; right: 3px; left: 3px; top: 3px; bottom: 3px; text-align: center; line-height: 350px; font-size: 30px; color: #fff; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;}
.gal-item a:hover:after{opacity: 1;}
.modal-open .gal-container .modal{ background-color: rgba(0,0,0,0.4);}
.modal-open .gal-item .modal-body{padding: 0px;}
.modal-open .gal-item button.close{position: absolute; width: 25px; height: 25px; background-color: #000; opacity: 1; color: #fff; z-index: 999; right: -12px; top: -12px; border-radius: 50%; font-size: 15px; border: 2px solid #fff; line-height: 25px; -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.35); box-shadow: 0 0 1px 1px rgba(0,0,0,0.35);}
.modal-open .gal-item button.close:focus{outline: none;}
.modal-open .gal-item button.close span{ position: relative; top: -3px; font-weight: lighter; text-shadow:none;}
.gal-container .modal-dialogue{width: 80%;}
.gal-container .description{ position: relative; height: 40px; top: -40px; padding: 10px 25px; background-color: rgba(0,0,0,0.5); color: #fff; text-align: left;}
.gal-container .description h4{ margin:0px; font-size: 15px; font-weight: 300; line-height: 20px;}
.gal-container .modal.fade .modal-dialog { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); top: 100px; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}

.gal-container .modal.fade.in .modal-dialog { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); opacity: 1;}

我没有任何JS,因为我一直在努力尝试,但仍然没有让它切换到模态窗口并返回

1 个答案:

答案 0 :(得分:0)

在上面的代码中,

没有像 #modalID

的ID

请使用此fiddle

<div class="modal fade" id="modalID" tabindex="-1" role="dialog">

您的代码缺少结束&gt;在那个脚本标签中也是。

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

请检查。