Question

我问一个有关我的函数Javascript的问题。我在ajax调用后恢复数据列表。在列表中，我有一个带有图片的字段，我想在模式引导程序中显示它。在我的代码中，图片显示在列的下方。

在此先感谢大家：）

$.when(promiseListeRubriqueDocument).then(function(result) {
  var data = JSON.parse(result);

  $(".listRubrique").html("");

  $.each(data, function(index, item) {

    console.log(item);
    var rubTemplate = $(".template");
    var modal = (".img");

    var rub = $(rubTemplate).clone().removeClass("template").removeClass("hide");

    $(rub).find(".labelRubrique").text(item.codeRubrique);
    $(rub).find(".inputRubrique").val(item.libelleRubrique);
    $(rub).find("div.rubrique-image").attr("data-rubrique-id", item.idRub);

    $(rub).find("div.rubrique-image[data-rubrique-id=" + item.idRub + "]").click(function(i, element) {
      if (item.imageRubrique) {
        if ($("" + "[data-rubrique-id=" + item.idRub + "]").find('img.rubrique-exemple').length < 1) {
          $("" + "[data-rubrique-id=" + item.idRub + "]").append("<div><img class='rubrique-exemple' src=" + item.imageRubrique + " width='100px' /></div>");
        }
      }
    });

    $(".listRubrique").append(rub);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="list-group-item template hide">
  <label class="labelRubrique" style="font-weight:bold"></label>
  <div class="row rubrique-image" data-rubrique-id="">
    <div class="col-md-8">
      <input name="enteteRubrique" id="enteteRubrique" maxlength="255" type="text" class="form-control aveo-icon aveo-magnifier inputRubrique" disabled/>
    </div>
    <div class="col-md-3">
      <a class="seeImage" href="javascript:void(0);" role='button' aria-expanded='false' aria-controls='collapseExample'><span class='glyphicon glyphicon-eye-open fa-lg'></span></a>
    </div>
  </div>
</li>

<div class="row">
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <liferay-ui: messagekey="admin.gestion.documents.rubriques.disponibles" />
      </div>
      <div class="panel-body">
        <ul class="list-group listRubrique">
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

“灯箱”是您所描述的通用名称。由于您提到了模式引导程序，因此类似http://jbutz.github.io/bootstrap-lightbox/的东西可能与您的目标保持一致。

Answer 2

只需克隆您的“字段” div，为其指定ID，然后附加到引导程序模式主体。或者为避免每次都添加新克隆，请使用.html()。

来自https://www.w3schools.com/bootstrap/bootstrap_modal.asp，经过修改，使用引导程序3.3.7，jQuery 3.3.1

<body>
<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div id='myColumn'>
     <img src="https://via.placeholder.com/350x150"/>                   
     <p>Some text in the modal.</p>
  </div>
</div>
<script>
$(document).ready(function(){
//  var field = $("" + "[data-rubrique-id=" + item.idRub + "]").clone();
    var fieldtest= $('#myColumn').clone();
    var modal = $("<div id='myModal' class='modal'>\
                <div class='modal-dialog'>\
                  <div class='modal-content'>\
                    <div id='myBody' class='modal-body'>\
                    </div>\
                  </div>\
                </div>\
              </div>").appendTo('body');
//   $('#myBody').html(field);
     $('#myBody').html(fieldtest);
});                  
</script>
</body>

`

我如何用图片做模态

2 个答案: