我有一些使用背景图片的超链接。并且想要弹出一个模态窗口,其中包含与背景相同的源图像。但似乎无法让它发挥作用。
我的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 -->
我在这里做错了吗?
答案 0 :(得分: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">×</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>
<强>已更新强>
投资组合模式弹出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});
});
投资组合模式弹出HTML
×
</div>
</div>
服务模式弹出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");
});
服务模式弹出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>