我是JS菜鸟,所以请耐心等待我。我正在一个有照片库的网站上工作,当你点击一张图片时,它会打开一个模式。我已经制作了一个免费的模板来实现这一点。JS添加关闭按钮模态
但是我添加了一个'close'图标,但我不知道如何使它工作。你能帮我么?
下面的代码:
$(document).ready(function(){
\t $('li img').on('click',function(){
\t \t var src = $(this).attr('src');
\t \t var img = '<img src="' + src + '" class="img-responsive"/>';
\t \t
\t \t //start of new code new code
\t \t var index = $(this).parent('li').index();
\t \t var html = '';
\t \t html += '<span class="close" style=padding:5px;>X</span>';
\t \t html += img;
\t \t html += '<div style="height:25px;clear:both;display:block;">';
\t \t html += '<a class="controls next" href="'+ (index+2) + '">pros »</a>';
\t \t html += '<a class="controls previous" href="' + (index) + '">« prec</a>';
\t \t html += '</div>';
\t \t
\t \t $('#myModal').modal();
\t \t $('#myModal').on('shown.bs.modal', function(){
\t \t \t $('#myModal .modal-body').html(html);
\t \t \t //new code
\t \t \t $('a.controls').trigger('click');
\t \t \t $('span.close').trigger('click');
\t \t })
\t \t $('#myModal').on('hidden.bs.modal', function(){
\t \t \t $('#myModal .modal-body').html('');
\t \t });
\t \t \t \t
}); \t
})
$(document).on('click', 'a.controls', function(){
\t var index = $(this).attr('href');
\t var src = $('ul.row li:nth-child('+ index +') img').attr('src');
\t
\t $('.modal-body img').attr('src', src);
\t
\t var newPrevIndex = parseInt(index) - 1;
\t var newNextIndex = parseInt(newPrevIndex) + 2;
\t
\t if($(this).hasClass('previous')){
\t \t $(this).attr('href', newPrevIndex);
\t \t $('a.next').attr('href', newNextIndex);
\t }else{
\t \t $(this).attr('href', newNextIndex);
\t \t $('a.previous').attr('href', newPrevIndex);
\t }
\t
\t var total = $('ul.row li').length + 1;
\t //hide next button
\t if(total === newNextIndex){
\t \t $('a.next').hide();
\t }else{
\t \t $('a.next').show()
\t }
\t //hide previous button
\t if(newPrevIndex === 0){
\t \t $('a.previous').hide();
\t }else{
\t \t $('a.previous').show()
\t }
\t
\t
\t return false;
});
预先感谢您:-)
如果你可以发布您的代码的JSBin或的jsfiddle您将很快得到解决方案。 :) – Mihailo
我很无聊,所以我做了[这](http://jsbin.com/sizuzas/edit?html,js,output)。如果您觉得有用,我会提供更多信息。 – Mihailo