我是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