Question

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

<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内。我需要的是在a标签中附加一个属性，如data-content，当点击它时，它将显示在模态体内。

但是，我不知道如何。

请帮忙。感谢

Answer 1

你已经有了你的答案，我的朋友数据标签就可以尝试类似

的尝试

<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>

Answer 2

确保HTML头中有jquery。如果不加这个：

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

您的HTML应该如下所示:(我将a元素的类更改为my-btn。可以随意将其更改为您喜欢的任何内容。）

<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);
      })
    });

希望这有帮助！

Answer 3

试试这个家伙。

$(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>

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

3 个答案: