javascript - 获取背景图像 url 并使用它来创建新的 <img> 元素

Question

我有几个使用背景图像的超链接。并想弹出一个模态窗口，其中有与背景同源的图像。但似乎无法让它发挥作用。

我当前的js代码

$('a.portfolio-item').click(function(event){
    event.preventDefault();
    var content = $('.modal-body');
    content.empty();
    var img = $(this).css('background-image').replace(/^url\(|\)$/g, "");
    content.html('<img src="'+ img +'">');   <---- need help here 
    $(".modal-profile").modal({show:true});
});

html

<a class="portfolio-item" style="background-image: url(img/portfolio-1.jpg);">
   <div class="details">
      <h4>Portfolio 1</h4>
      <span>description here</span>
   </div>
</a>

<!-- .modal-profile -->
<div class="modal fade modal-profile" tabindex="-1" role="dialog" aria-labelledby="modalProfile" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>
<!-- //.modal-profile -->

我在这里做错了什么吗？

Answer 1

您需要进行如下更改，从 src 中删除 " 请查找以下代码片段供您引用

content.html('<img src='+ img +'>');

$('a.portfolio-item').click(function(event){
debugger;
    event.preventDefault();
    var content = $('.modal-body');
    content.empty();
    var img = $(this).parent().css('background-image').replace(/^url\(|\)$/g, "");
    content.html('<img src='+ img +'>');  
    $(".modal-profile").modal();
});

.block a{
    display:block;
    width:100%;
    height:25px; // spared height: from the top;
    overflow:hidden;
    text-indent:-99999px;
    
    left:0;
    bottom:0; // or you can try with top:175px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="position:relative; background: url('https://dummyimage.com/200x200') no-repeat scroll 0 0 transparent; background-position: bottom;" class="block block2 ">
   <ul class="elem"></ul>
   <span class="left_border"></span>
   <a href='#' class="portfolio-item">link</a>       
</div>

<!-- Modal -->
<div id="myModal" class="modal fade modal-profile" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

已更新

Portfolio Modal pop up JS

$('a.portfolio-item').click(function(event){
    event.preventDefault();
    var content = $('.modal-body-portfolio');
    var title = $(".modal-title-portfolio");

    content.empty();
    title.empty();
    //var title = $(this).attr("title");
    //$('.modal-title').html(title);
    var img = $(this).css('background-image').replace(/^url\(|\)$/g, "");
    content.html('<img class="img-responsive" src='+ img +'>');
    $(".modal-profile").modal({show:true});
  });

Portfolio Modal pop up HTML

×

  </div>
</div>

Service Modal pop up JS

$(".row .service-icon").click(function() {
    var content = $(".carousel-inner");
    var title = $(".modal-title-service");

    content.empty();  
    title.empty();

    var id = this.id;  
    var repo = $("#img-repo .item");
    var repoCopy = repo.filter("#" + id).clone();
    var active = repoCopy.first();

    active.addClass("active");
    title.html(active.find("img").attr("title"));
    content.append(repoCopy);

    // show the modal
    $("#modal-gallery").modal("show");
  });

Service Modal pop up HTML

    <div class="modal" id="modal-gallery" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <h3 class="modal-title modal-title-service"></h3>
      </div>
      <div class="modal-body modal-body-service">
        <div id="modal-carousel" class="carousel">
          <div class="carousel-inner">           
          </div>
          <a class="carousel-control left" href="#modal-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="carousel-control right" href="#modal-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>