我正在尝试在Bootstrap 4.0 Beta中以模式显示Google Map。
我发现this post并且代码可以正常工作，但是我在jQuery中不够“流利”，无法在Javascript中完成所需的工作。我也took a look here弄清楚如何获取发件人，但我无法弄清楚。
假设我的<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>中，我设置了基本模式...<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>
我找到了这个答案，这正是我想要做的，但是地址被硬编码到示例中：
// 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属性和按钮的标题？ 最佳答案
也许通过使用event.relatedTarget？
$('#your-modal').on('show.bs.modal', function (e) {
var $invoker = $(e.relatedTarget);
});
从OP更新：
这段代码使我超越了终点：
$('#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>');
})
关于javascript - 在jQuery中为Bootstrap iframe模式提取发件人信息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46102000/