在jQuery中为Bootstrap iframe模式提取发件人信息 [英] Extracting sender info in jQuery for Bootstrap iframe modal
本文介绍了在jQuery中为Bootstrap iframe模式提取发件人信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在Bootstrap 4.0 Beta中以模式显示Google Map.
I'm attempting to display a Google Map in a modal in Bootstrap 4.0 Beta.
我发现了这篇文章并且代码有效，但是我在jQuery中不够流利"，无法做到Javascript我需要它做什么.我还在这里看看以弄清楚如何获取发件人，但我不能弄清楚.
I found this post and the code works, but I'm not "fluent" enough in jQuery to do in Javascript what I need it to do. I also took a look here to figure out how to get the sender, but I can't figure it out.
假设我的<button>声明如下:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#google-map-modal" data-source="https://www.google.com/maps/embed?a-whole-bunch-of-gibberish"><i class="icon-food"></i> Graceland Directions</button>
...在我的<footer>中，我已经设置了基本模态...
...and in my <footer>, I've set up the basic modal...
<footer>
<!-- Code for map modal -->
<div class="modal fade" id="google-map-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="close">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</footer>
我找到了这个答案，这正是我想要做的，但是地址被硬编码到示例中:
I found this answer on, which is exactly what I wanted to do, but the address is hardcoded into the example:
// Bootstrap modal Google Map
$('#google-map-modal').on('shown.bs.modal', (function() {
console.log("something happened");
var mapIsAdded = false;
return function() {
if (!mapIsAdded) {
$('.modal-body').html('<h1>Test</h1><br><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');
mapIsAdded = true;
}
};
})());
// Bootstrap modal Google Map
$('#google-map-modal').on('shown.bs.modal', (function() {
console.log("something happened");
var mapIsAdded = false;
return function() {
if (!mapIsAdded) {
$('.modal-body').html('<h1>Test</h1><br><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');
mapIsAdded = true;
}
};
})());
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Directions to Graceland</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img class="img-responsive" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/23/web-elvis-rex.jpg" alt="Fat Elvis" style="max-height: 200px;height: auto;width:auto">
<h1>The King!</h1>
<p>Here are directions to Graceland.</p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#google-map-modal" data-source="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d13044176.127729293!2d-92.52026694322687!3d37.04286531005349!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington+D.C.%2C+DC!3m2!1d38.9071923!2d-77.0368707!4m5!1s0x87d57d31cebd7225%3A0xfd48f1ff0c23cb11!2sGraceland%2C+Elvis+Presley+Blvd%2C+Memphis%2C+TN+38116!3m2!1d35.047691199999996!2d-90.0260493!5e0!3m2!1sen!2sus!4v1504803828896"><i class="icon-food"></i> Graceland Directions</button>
<!-- Raw Google embed code -->
<!--
<iframe src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d13044176.127729293!2d-92.52026694322687!3d37.04286531005349!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e6!4m5!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington+D.C.%2C+DC!3m2!1d38.9071923!2d-77.0368707!4m5!1s0x87d57d31cebd7225%3A0xfd48f1ff0c23cb11!2sGraceland%2C+Elvis+Presley+Blvd%2C+Memphis%2C+TN+38116!3m2!1d35.047691199999996!2d-90.0260493!5e0!3m2!1sen!2sus!4v1504803828896" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
</div>
<footer>
<!-- Code for map modal -->
<div class="modal fade" id="google-map-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="close">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
我如何更新jQuery以获取发件人的data-source属性和按钮的标题?
How would I update jQuery to grab the sender's data-source attribute and the title of the button?
推荐答案
也许通过使用 从OP更新:
这段代码使我越过终点线:
This code got me over the finish line:
$('#google-map-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var locationName = button.text();
var locationUrl = button.attr('data-source');
var modal = $(this)
modal.find('.modal-title').text(locationName);
modal.find('.modal-body').html('<iframe src="'+locationUrl+'"width="100%" height="400" frameborder="0" style="border:0"></iframe>');
})
这篇关于在jQuery中为Bootstrap iframe模式提取发件人信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
