代码之家 › 专栏 › 技术社区 › smzapp

如何在bootstrap中以按钮模式从属性传递数据

twitter-bootstrap jquery

smzapp · 技术社区 · 7 年前

我下面有一个引导代码。单击按钮时,模式正确显示。

<a href="#" class="btn" data-toggle="modal" data-target=".bs-example-modal-lg">

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
  <div class="modal-header"> 
    <h4 class="modal-title"><i class="glyphicon glyphicon-bell"></i>&nbsp; New Message</h4>
  </div>      
  <div class="modal-body">
   <!--  data should be displayed here when an href button is clicked -->
  </div>
</div>

现在,我想从 a modal body . 我需要的是在标签式 data-content 单击时,它将显示在模态体中。

但是,我不知道怎么做。

请帮忙。谢谢

3 回复 | 直到 7 年前

Ahmad Ghizzawi 7 年前

确保在HTML头部有jquery。如果没有添加:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a href="#" class="my-btn" data-toggle="modal" data-target=".bs-example-modal-lg"
   data-content="hello">Test Btn</a>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title"><i class="glyphicon glyphicon-bell"></i>&nbsp; New Message</h4>
      </div>
      <div class="modal-body">
        <!--  data should be displayed here when an href button is clicked -->
      </div>
    </div>
  </div>
</div>

您的javascript代码应该如下所示:

 $(document).ready(function () {
      $('.my-btn').click(function () {
        var myDataValue = $(this).data('content');
        $('.modal-body').text(myDataValue);
      })
    });

RAHUL S R 7 年前

你已经有你的答案了,我的朋友数据-标签会成功的,试试类似的方法

<a href="#" class="btn" data-myVal="My sample Value" data-toggle="modal" data-target=".bs-example-modal-lg">

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
  <div class="modal-header"> 
    <h4 class="modal-title"><i class="glyphicon glyphicon-bell"></i>&nbsp; New Message</h4>
  </div>      
  <div class="modal-body">
   <!--  data should be displayed here when an href button is clicked -->
  </div>
</div>

<script>
$(function()
{
$('.btn').on('click',function(){
$('.modal-body').html($('.btn').data('myVal'));
})
})
</script>

Kenneth 7 年前

试试这个,伙计。

$(document).ready(function(){
    $("#modalButton").click(function(){
      var value = $(this).data("content");
      $("#modal-input").val(value);
      
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                                                               <!-- look at the data-value.. -->
<div class="text-center">
<br><br>
<a href="#" class="btn btn-primary " data-toggle="modal" data-target=".bs-example-modal-lg" data-content="Your Content" id="modalButton">Click here</a>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
  <div class="modal-header"> 
    <h4 class="modal-title">&nbsp; Your Modal</h4>
  </div>      
  <div class="modal-body">
  <input class="form-control" id="modal-input">
   <!--  data should be displayed here when an href button is clicked -->
  </div>
</div>