引导画廊模态不起作用
[英]bootstrap gallery modal not working
问题描述
我在使用基本的图片库和自举程序时遇到了麻烦，我以为我正确地执行了模态操作，但是当我单击并希望它通过触摸或单击来切换进出时，什么也没有发生。
<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">×</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 个解决方案
解决方案1
0 2018-03-06 05:18:46
在上面的代码中，
没有像#modalID这样的ID ，
请用这个小提琴
<div class="modal fade" id="modalID" tabindex="-1" role="dialog">
您的代码也缺少该脚本标记中的>。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
请检查。
bootstrap莫代尔照片库
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.