如何在 Bootstrap 3 中将变量传递给模态

Question

我已经为此苦苦挣扎了几天。我尝试了很多不同的解决方案其中 none 为我工作。然后我遇到了以下link，它似乎是正是我要找的。 https://codepen.io/Oza94/pen/ZbERWy我完全复制了源，到我的本地主机以及我的 godaddy 域。模型打开，但数据 "troudbal troudbal" 不会像在 codepen 示例中那样出现在我的服务器上。有人可以帮忙吗？

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Pass Modal Vars</title>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

  <script>
    // data-* attributes to scan when populating modal values
    var ATTRIBUTES = ['myvalue', 'myvar', 'bb'];

    $('[data-toggle="modal"]').on('click', function(e) {
      // convert target (e.g. the button) to jquery object
      var $target = $(e.target);
      // modal targeted by the button
      var modalSelector = $target.data('target');

      // iterate over each possible data-* attribute
      ATTRIBUTES.forEach(function(attributeName) {
        // retrieve the dom element corresponding to current attribute
        var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);
        var dataValue = $target.data(attributeName);

        // if the attribute value is empty, $target.data() will return undefined.
        // In JS boolean expressions return operands and are not coerced into
        // booleans. That way is dataValue is undefined, the left part of the following
        // Boolean expression evaluate to false and the empty string will be returned
        $modalAttribute.text(dataValue || '');
      });
    });
  </script>
</head>

<body>

  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-myvalue="trouducul" data-myvar="bisbis">
      Launch demo modal 1
      </button>

  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-myvalue="troudbal" data-bb="troudbal">
      Launch demo modal 2
      </button>


  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
          <span id="modal-myvalue"></span> <span id="modal-myvar"></span> <span id="modal-bb"></span>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</html>

Answer 1

是的，在像 $('#myModal').on('show.bs.modal', function(e) {...}) 这样的预定义模态方法的帮助下，可以通过 Bootstrap3 实现。
文档：https://getbootstrap.com/docs/3.3/javascript/#modals-events

我希望下面的代码片段对你有很大帮助。

// data-* attributes to scan when populating modal values
var attributesArray = ['myvalue', 'myvar', 'bb'];
// This event fires immediately when the show instance method is called. 
$('#myModal').on('show.bs.modal', function(e) {
  // Get modal id
  var $target = e.target.id;
  // Get target values of clicked button
  var $relatedTarget = e.relatedTarget;
  // Iterate over each possible data-* attribute
  attributesArray.forEach(function(attributeName){
    $('#'+$target+ ' #modal-'+attributeName).text($($relatedTarget).data(attributeName) || '');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<br><br>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-myvalue="trouducul" data-myvar="bisbis">
        Launch demo modal 1
      </button>
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-myvalue="troudbal" data-bb="troudbal">
        Launch demo modal 2
      </button>
     </div>
   </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
      <h4>
       <span id="modal-myvalue"></span>
       <span id="modal-myvar"></span>
       <span id="modal-bb"></span>
      </h4>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
   </div>
  </div>
</div>

Answer 2

请尝试以下操作，

Javascript part,
  `<script type="text/javascript">
   $(document).on("click", ".open-modal", function () {
   var x = new Date(); 
   var myHeading = "<p>I Am Added Dynamically </p>";
   $("#modal-body").html(myHeading + x);     
   $('#modal').modal('show');
   });

`

HTML部分；

   `<!----modal starts here--->
    <div id="modal" class="modal fade" role='dialog'>
    <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria- 
     hidden="true">×</button>
            <h4 class="modal-title"> Modal Demo</h4>
        </div>
        <div class="modal-body" id= "modal-body">
            <p>Here the description starts here........</p>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data- 
          dismiss="modal">Close</button>
         </div>
      </div>
    </div>
  </div>
 <!--Modal ends here--->

  <button type="button" class="btn btn-info btn-lg open-modal" >Click Here To Open Modal</button>`

如何在 Bootstrap 3 中将变量传递给模态

How to pass variable to modal in Bootstrap 3

html

jquery

twitter-bootstrap-3