个人中心
gpt4 book ai didi

javascript - 在 jQuery 中为 Bootstrap iframe 模式提取发件人信息

转载 作者：行者123 更新时间：2023-12-03 03:31:02 25 4
gpt4 key购买 nike

我正在尝试在 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">&times;</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">&times;</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/

25 4 0
文章推荐： javascript - 如何使用 ajax 调用更新/更改数据库值而不刷新页面
文章推荐： dart - dart 可以替代 php 服务器端脚本吗？
文章推荐： .net - 跨服务边界传递异常，是个坏主意吗？
文章推荐： javascript - 如何从 Javascript 使用 Entity Framework 更新数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com