将数据属性传递给模态引导程序 [英] Pass data attribute to modal bootstrap

查看：44
本文介绍了将数据属性传递给模态引导程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<a class="my_link" data-val="user1" href="#">模态链接</a>

我有这个链接来打开一个引导模式，但我需要传递数据属性data-val".我尝试使用 javascript 但我没有得到它.你能帮我吗?

解决方案

您可以在 modal 上监听 show.bs.modal 事件并获取被点击的元素作为 relatedTarget> 事件的属性.检查 Bootstrap modal documentation 以获取进一步参考.

这是一个使用 Bootstrap v4 的工作示例.

$('#my-modal').on('show.bs.modal', function (event) {var myVal = $(event.relatedTarget).data('val');$(this).find(".modal-body").text(myVal);});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iZKY0Mjb7"cross"cross<a href="#" class="my_link" data-val="user1" data-toggle="modal" data-target="#my-modal">打开模态</a><div class="modalfade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="my-modal" aria-hidden="true"><div class="modal-dialog" 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">&times;</span>

<div class="modal-body">

<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

<!-- jQuery、Popper 和 Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYOrigint"></脚本><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlorgins"/script>

<a class="my_link" data-val="user1" href="#">modal link</a>

I have this link to open a bootstrap modal, but I need to pass data attribute "data-val". I tried with javascript but I didn't get it. Can you please help me?

解决方案

You can listen for show.bs.modal event on modal and get the clicked element available as relatedTarget property of the event. Check Bootstrap modal documentation for further reference.

Here is a working example using Bootstrap v4.

$('#my-modal').on('show.bs.modal', function (event) {
  var myVal = $(event.relatedTarget).data('val');
  $(this).find(".modal-body").text(myVal);
});

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<a href="#" class="my_link" data-val="user1" data-toggle="modal" data-target="#my-modal">Open Modal</a>

<div class="modal fade" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="my-modal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">My Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- jQuery, Popper and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

这篇关于将数据属性传递给模态引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆