我打开模态时添加下一个和上一个按钮 [英] Add next and previous buttons when the I open the modal
本文介绍了我打开模态时添加下一个和上一个按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手，我想问你是否可以帮助我在我的模态中添加下一个和上一个按钮。图片不是图库形式。我是否添加div或者像这样添加一些javascript？你能建议吗？
I am a newbie and I wanted to ask if you can help me add next and previous buttons to my modal. The pictures are not in gallery form. Do I add div or just like this and add some javascript? Can you suggest some?
var modal = document.getElementById('myModal');
var img = $('.myImg');
var modalImg = $("#img01");
var captionText = document.getElementById("caption");
$('.myImg').click(function(){
modal.style.display = "block";
var newSrc = this.src;
modalImg.attr('src', newSrc);
captionText.innerHTML = this.alt;
});
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.nvgt{
position:absolute;
top: 120px;
height: 50px;
width: 30px;
opacity: 0.6;
}
.nvgt:hover{
opacity: 0.9;
}
#prev{
background: #000 url('./image/prev.png') no-repeat center;
left: 0px;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
background:white;
margin-bottom:10px;
}
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li></li><img class="myImg" src="https://media.giphy.com/media/28XGOLkn9HIXK/giphy.gif" alt="Grumpy Cat Paintball" width="300" height="200">
<li><img class="myImg" src="https://g.twimg.com/blog/blog/image/Cat-party.gif" alt="DJ Cat" width="300" height="200"></li>
<li><img class="myImg" src="https://media.giphy.com/media/26FPCXdkvDbKBbgOI/giphy.gif" alt="Sorcerer Supreme" width="300" height="200"></li>
<li><img class="myImg" src="https://media.giphy.com/media/f2fVSJWddYb6g/giphy.gif" alt="Rambo" width="300" height="200"></li>
<li><img class="myImg" src="http://24.media.tumblr.com/tumblr_lg3i47epIK1qght7mo1_500.gif" alt="Laser Vision" width="300" height="200"></li>
</ul>
<div id="myModal" class="modal">
<span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
应如下所示：
推荐答案
在这里你有... ...
Here you have it...
<!doctype html>
<html>
<head>
<title>Boostrap modal prev and next button</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('ul.first').bsPhotoGallery({
"classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
"hasModal" : true,
// "fullHeight" : false
});
});
</script>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #ebebeb;
}
ul {
padding: 0 0 0 0;
margin: 0 0 40px 0;
}
ul li {
list-style: none;
margin-bottom: 10px;
}
.text {
/*font-family: 'Bree Serif';*/
color: #666;
font-size: 11px;
margin-bottom: 10px;
padding: 12px;
background: #fff;
}
#bsPhotoGalleryModal .modal-content {
border-radius:0;
}
#bsPhotoGalleryModal .modal-dialog img {
text-align:center;
margin:0 auto;
width:100%;
}
#bsPhotoGalleryModal .modal-body {
padding:0px !important;
}
#bsPhotoGalleryModal .bsp-close {
position: absolute;
right: -14px;
top: -11px;
font-size: 30px;
color:#fff;
text-shadow: 1px 1px 18px #000;
}
#bsPhotoGalleryModal .bsp-close:hover {
cursor: pointer;
opacity:.6;
text-shadow: none;
}
.bspHasModal {
cursor: pointer;
}
.bspHasModal .text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.imgWrapper {
overflow: hidden;
max-height: 99px;
}
a.bsp-controls,
a.bsp-controls:visited,
a.bsp-controls:active {
position: absolute;
top: 44%;
font-size: 26px;
color: #fff;
text-shadow: 1px 1px 18px #000;
}
a.bsp-controls.next {
right:-10px;
}
a.bsp-controls.previous {
left:-10px;
}
a.bsp-controls:hover {
opacity:.6;
text-shadow: none;
}
.bsp-text-container {
clear:both;
display:block;
padding-bottom: 5px;
}
#bsPhotoGalleryModal h6{
margin-bottom: 0;
font-weight: bold;
color: #000;
font-size: 14px;
padding-left: 12px;
padding-right: 12px;
margin-bottom: 5px;
}
#bsPhotoGalleryModal .pText {
font-size: 11px;
margin-bottom: 0px;
padding: 0 12px 5px;
}
@media screen and (max-width: 380px){
.col-xxs-12 {
width:100%;
}
.col-xxs-12 img {
width:100%;
}
}
</style>
</head>
<body>
<div class="container">
<br /><br />
<ul class="row first">
<li><img class="myImg" src="https://media.giphy.com/media/28XGOLkn9HIXK/giphy.gif" alt="Grumpy Cat Paintball" width="300" height="200">
<div class="text">Description</div>
</li>
<li>
<img class="myImg" src="https://g.twimg.com/blog/blog/image/Cat-party.gif" alt="DJ Cat" width="300" height="200">
<div class="text">Description</div>
</li>
<li>
<img class="myImg" src="https://media.giphy.com/media/26FPCXdkvDbKBbgOI/giphy.gif" alt="Sorcerer Supreme" width="300" height="200">
<div class="text">Description</div>
</li>
<li>
<img class="myImg" src="https://media.giphy.com/media/f2fVSJWddYb6g/giphy.gif" alt="Rambo" width="300" height="200">
<div class="text">Description</div>
</li>
<li>
<img class="myImg" src="http://24.media.tumblr.com/tumblr_lg3i47epIK1qght7mo1_500.gif" alt="Laser Vision" width="300" height="200">
<div class="text">Description</div>
</li>
</ul>
</div>
</body>
</html>
<script>
(function($) {
"use strict";
$.fn.bsPhotoGallery = function(options) {
var settings = $.extend({}, $.fn.bsPhotoGallery.defaults, options);
var id = generateId();
var classesString = settings.classes;
var classesArray = classesString.split(" ");
var clicked = {};
function getCurrentUl() {
return 'ul[data-bsp-ul-id="' + clicked.ulId + '"][data-bsp-ul-index="' + clicked.ulIndex + '"]';
}
function generateId() {
//http://fiznool.com/blog/2014/11/16/short-id-generation-in-javascript/
var ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var ID_LENGTH = 4;
var out = '';
for (var i = 0; i < ID_LENGTH; i++) {
out += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
}
return 'bsp-' + out;
}
function createModalWrap() {
if ($('#bsPhotoGalleryModal').length !== 0) {
return false;
}
var modal = '';
modal += '<div class="modal fade" id="bsPhotoGalleryModal" tabindex="-1" role="dialog"';
modal += 'aria-labelledby="myModalLabel" aria-hidden="true">';
modal += '<div class="modal-dialog modal-lg"><div class="modal-content">';
modal += '<div class="modal-body"></div></div></div></div>';
$('body').append(modal);
}
function showHideControls() {
var total = $(getCurrentUl() + ' li[data-bsp-li-index]').length;
if (total === clicked.nextImg) {
$('a.next').hide();
} else {
$('a.next').show()
}
if (clicked.prevImg === -1) {
$('a.previous').hide();
} else {
$('a.previous').show()
}
}
function showModal() {
var src = $(this).find('img').attr('src');
var largeImg = $(this).find('img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var index = $(this).attr('data-bsp-li-index');
var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index');
var ulId = $(this).parent('ul').attr('data-bsp-ul-id');
var theImg = $(this).find('img');
var pText = $(this).find('.text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
clicked.img = src;
clicked.prevImg = parseInt(index) - parseInt(1);
clicked.nextImg = parseInt(index) + parseInt(1);
clicked.ulIndex = ulIndex;
clicked.ulId = ulId;
$('#bsPhotoGalleryModal').modal();
var html = '';
var img = '<img src="' + clicked.img + '" class="img-responsive"/>';
html += img;
html += '<span class="' + settings.iconClose + ' bsp-close"></span>';
html += '<div class="bsp-text-container">';
if (alt !== null) {
html += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
html += '<p class="pText">' + pText + '</p>'
}
html += '</div>';
html += '<a class="bsp-controls next" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.nextImg) + '"><span class="' + settings.iconRight + '"></span></a>';
html += '<a class="bsp-controls previous" data-bsp-id="' + clicked.ulId + '" href="' + (clicked.prevImg) + '"><span class="' + settings.iconLeft + '"></span></a>';
$('#bsPhotoGalleryModal .modal-body').html(html);
$('.bsp-close').on('click', closeModal);
showHideControls();
}
function closeModal() {
$('#bsPhotoGalleryModal').modal('hide');
}
function nextPrevHandler() {
var ul = $(getCurrentUl());
var index = $(this).attr('href');
var src = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('src');
var largeImg = ul.find('li[data-bsp-li-index="' + index + '"] img').attr('data-bsp-large-src');
if (typeof largeImg === 'string') {
src = largeImg;
}
var pText = ul.find('li[data-bsp-li-index="' + index + '"] .text').html();
var modalText = typeof pText !== 'undefined' ? pText : 'undefined';
var theImg = ul.find('li[data-bsp-li-index="' + index + '"] img');
var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null;
$('#bsPhotoGalleryModal .modal-body img').attr('src', src);
var txt = '';
if (alt !== null) {
txt += '<h6>' + alt + '</h6>'
}
if (typeof pText !== 'undefined') {
txt += '<p class="pText">' + pText + '</p>'
}
$('.bsp-text-container').html(txt);
clicked.prevImg = parseInt(index) - 1;
clicked.nextImg = parseInt(clicked.prevImg) + 2;
if ($(this).hasClass('previous')) {
$(this).attr('href', clicked.prevImg);
$('a.next').attr('href', clicked.nextImg);
} else {
$(this).attr('href', clicked.nextImg);
$('a.previous').attr('href', clicked.prevImg);
}
// console.log(clicked);
showHideControls();
return false;
}
function clearModalContent() {
$('#bsPhotoGalleryModal .modal-body').html('');
clicked = {};
}
function insertClearFix(el, x) {
var index = (x + 1);
$.each(classesArray, function(e) {
switch (classesArray[e]) {
//large
case "col-lg-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
case "col-lg-5":
case "col-lg-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-lg-block"></li>');
}
break;
//medium
case "col-md-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
case "col-md-5":
case "col-md-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-md-block"></li>');
}
break;
//small
case "col-sm-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
case "col-sm-5":
case "col-sm-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-sm-block"></li>');
}
break;
//x-small
case "col-xs-1":
if ($(el).next('li.clearfix').length == 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-2":
if (index % 6 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-3":
if (index % 4 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-4":
if (index % 3 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
case "col-xs-5":
case "col-xs-6":
if (index % 2 === 0) {
$(el).after('<li class="clearfix visible-xs-block"></li>');
}
break;
}
});
}
this.each(function(i) {
//ul
var items = $(this).find('li');
$(this).attr('data-bsp-ul-id', id);
$(this).attr('data-bsp-ul-index', i);
items.each(function(x) {
var theImg = $(this).find('img');
insertClearFix(this, x);
$(this).addClass(classesString);
$(this).attr('data-bsp-li-index', x);
theImg.addClass('img-responsive');
if (settings.fullHeight) {
theImg.wrap('<div class="imgWrapper"></div>')
}
if (settings.hasModal === true) {
$(this).addClass('bspHasModal');
$(this).on('click', showModal);
}
});
})
if (settings.hasModal === true) {
//this is for the next / previous buttons
$(document).on('click', 'a.bsp-controls[data-bsp-id="' + id + '"]', nextPrevHandler);
$(document).on('hidden.bs.modal', '#bsPhotoGalleryModal', clearModalContent);
//start init methods
createModalWrap();
}
return this;
};
/*defaults*/
$.fn.bsPhotoGallery.defaults = {
'classes': 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
'hasModal': true,
'fullHeight': true,
'iconClose': 'glyphicon glyphicon-remove-circle',
'iconLeft': 'glyphicon glyphicon-chevron-left',
'iconRight': 'glyphicon glyphicon-chevron-right'
}
}(jQuery));
</script>
这篇关于我打开模态时添加下一个和上一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
