Question

我已经找到了（Bootstrap open image in modal）如何在模态中打开图像，但我需要更多功能。

1）我需要为每张照片添加不同的描述

2）我想模态窗口将是最大的。屏幕的全高度不是照片的100％...

这是一个例子。

我希望每个图像都能改变3行（页脚中的描述）。

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
  <div class="modal-content"  >              
    <div class="modal-body">
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
         <img src="" class="imagepreview" style="width: 100%;" >
    </div> 
 <div class="modal-footer">
   <div class="col-xs-12">
       <p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
   </div>
 </div>

JavaScript的：

$(function() {
$('.pop').on('click', function() {
    $('.imagepreview').attr('src', $(this).find('img').attr('src'));
    $('#imagemodal').modal('show');   
});     });

http://jsfiddle.net/2ve4hbmm/

Answer 1

Updated Demo

1）我需要为每张照片添加不同的描述

要将描述添加到照片，您可以使用数据属性来存储要为每个图像添加的文本或html。在我的示例中，我使用了3个单独的数据属性来为每个图像设置标题，描述和来源，如下所示：

<a href="#" class="pop" data-title="Turkish Van Cat" data-desc="The Turkish Van is a semi-long-haired breed of domestic cat, which was developed in the United Kingdom from a selection of cats obtained from various cities of modern Turkey, especially Southeast Turkey." data-source="<strong>Source</strong> Wikipedia">
    <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" class="img-responsive" />
</a>

然后，您可以使用 jQuery data 方法轻松检索数据属性的值。

$('.pop').on('click', function () {
    //Get the value of the data-title attribute
    var title = $(this).data('title'); 
    //Get the value of the data-desc attribute
    var desc = $(this).data('desc');
    //Get the value of the data-source attribute
    var source = $(this).data('source');
    //Add the title text to the container with the title class
    $('.title').text(title);
    //Add the desc text to the container with the desc class
    $('.desc').text(desc);
    //Add the source *html* to the container with the source class
    $('.source').html(source);
    $('.imagepreview').attr('src', $(this).find('img').attr('src'));
    $('#imagemodal').modal('show');
});

您使用jQuery text 方法放置文字，但是如果您要添加html，就像我做的那样来制作单词＆＃34; Source＆＃34;在data-source属性中加粗，您需要使用JQuery html 方法。两种方法的作用相同，因为它们将完全替换目标的内容。我在模式的html中创建了三个单独的目标，其中包含.title，.desc和.source类。

<div class="img-description">
  <p class="text-left title"></p>
  <p class="text-left desc"></p>
  <p class="text-left source"></p>
</div>

2）我想模态窗口将是最大的。全屏高度不是100％照片...

有几种不同的方法可以解决这个问题，如果您的图像具有不同的高度/宽度比并且文本长度未知，则会遇到一些挑战。为了解决这些问题，我没有覆盖.modal-footer类，而是创建了一个新的.img-description类，我绝对相对于模态体。

将模态设置为屏幕高度/宽度的100％的技巧是覆盖.modal-dialog类并绝对定位它。图像容器的类别为.img，其高度为80％，因此您可以将图像本身的最大高度设置为100％，以使其垂直填充空间。

.modal-dialog {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.modal-content, .modal-body {
  height: 100%;
  overflow: hidden;
}
.img-description {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  background-color: #fff;
  border-radius: 6px;
}
.title {
  font-weight: bold;
  font-size: 1.2em;
}
.img {
  height: 80%;
}
.imagepreview {
  max-height: 100%;
  display: inline-block;
}

模态的html现在看起来像这样：

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" data-dismiss="modal">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

                </button>
                <div class="text-center img">
                    <img src="" class="img-responsive imagepreview" />
                </div>
                <div class="img-description">
                    <p class="text-left title"></p>
                    <p class="text-left desc"></p>
                    <p class="text-left source"></p>
                </div>
            </div>
        </div>
    </div>
</div>

在bootstrap模态中打开的图像中添加不同的描述

1 个答案: