在引导模式中更改 href 属性
[英]Changing the href attribute in a bootstrap modal
问题描述
I have one bootstrap modal that I change the contents of for 9 different elements (depending on what the user clicks on).
我有一个引导模式，我可以更改 9 个不同元素的内容（取决于用户单击的内容）。
Currently I am able to change the title and description area of each modal but i'm having trouble changing the href="" attribute of the modal.目前我可以更改每个模态的标题和描述区域，但是我无法更改模态的href=""属性。
Here is my html modal code,这是我的 html 模式代码，
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"><a href="#">Visit Site</a></button>
</div>
</div>
</div>
</div>
This is the img that the user clicks on to activate the modal (I have 9 in total)这是用户单击以激活模态的 img（我总共有 9 个）
<img data-toggle="modal" data-target="#exampleModal" data-whatever="Project 1"
data-description="This is the description for Project 1" src="source of my image">
And JQuery和 JQuery
$("#exampleModal").on("show.bs.modal", function (event) {
var button = $(event.relatedTarget);
var recipient = button.data("whatever");
var info = button.data("description");
var modal = $(this);
modal.find(".modal-title").text(recipient);
modal.find(".modal-body p").text(info);
});
So my JQuery extracts the data-whatever and data-description from the img and inserts them into the modal with my JQuery.所以我的 JQuery 从 img 中提取 data-whatever 和 data-description，并用我的 JQuery 将它们插入到模态中。 I have not been able to find a way to target the href attribute of the "Visit Site" link in the bootstrap modal code.我无法找到一种方法来定位引导模式代码中“访问站点”链接的 href 属性。 I tried adding a new data-link with my desired url but that just changes the text and does not set the actual link.我尝试用我想要的 url 添加一个新的数据链接，但这只是改变了文本，并没有设置实际的链接。
Also, I would like to add an image to the modal that varies based on which image the user clicks on to activate the modal.另外，我想向模态添加一个图像，该图像会根据用户单击哪个图像来激活模态而有所不同。
3 个解决方案
解决方案1
2 已采纳 2019-01-16 06:54:26
Try This:尝试这个：
$("#exampleModal").on("show.bs.modal", function(event) { var button = $(event.relatedTarget); var recipient = button.data("whatever"); var info = button.data("description"); var link = button.data("href"); var img_src = button.attr("src"); var modal = $(this); modal.find(".modal-title").text(recipient); modal.find(".modal-body p").text(info); modal.find(".modal-body img").attr("src", img_src); modal.find(".modal-footer button a").attr("href", link); });
<!DOCTYPE html> <html> <head> <title>Image Modal</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.css"> </head> <body> <img data-toggle="modal" data-target="#exampleModal" data-whatever="Project 1" data-description="This is the description for Project 1" data-href="https://www.google.com" src="https://www.gstatic.com/webp/gallery/5.sm.jpg"> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"></h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div> <img src="" height="200px" width="200px" /> <p></p> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary"><a href="#">Visit Site</a></button> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.js"></script> </body> </html>
解决方案2
1 2019-01-16 05:12:27
Use attr() for change href.使用 attr() 更改 href。 Please follow below example, it may help you.请按照以下示例进行操作，它可能会对您有所帮助。
$("a").attr("href","https://stackoverflow.com");
解决方案3
0 2019-01-16 05:39:04
<img src="image.jpg data-title="Title one" data-desc="Description one" data-toggle="modal" data-target="#exampleModal" />
<img src="image.jpg data-title="Title two" data-desc="Description two" data-toggle="modal" data-target="#exampleModal"/>
<img src="image.jpg data-title="Title three" data-desc="Description three" data-toggle="modal" data-target="#exampleModal"/>
jQuery jQuery
$('img[data-target="#exampleModal"]').on('click', function() {
var title = $(this).data('title');
var desc = $(this).data('desc');
$('#exampleModal .modal-title').html(title);
$('#exampleModal .modal-body').html(desc);
});
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.