How to pass variable to modal in Bootstrap 3

user_6674169 0
Viewed 1491

I have benn struggling for a few days on this now. I have tried many different solutions and none of them work for me. Then I came accross the following link, and it appears to be exactly what I am looking for. https://codepen.io/Oza94/pen/ZbERWy I copied the source exactly, to my localhost as well as my godaddy domain. The models open, but the data "troudbal troudbal" does not appear on my server as it does in the codepen example. Can anyone help?

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

twitter-bootstrap-3 html jquery
2 Answers

Yes, Its possible by Bootstrap3 with help of predefined modal method like $('#myModal').on('show.bs.modal', function(e) {...}).
Doc: https://getbootstrap.com/docs/3.3/javascript/#modals-events

I hope below snippet will help you lot.

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

user_70529270

please try the following,

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

   `<!----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>`
user_112186350
Related