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