<html> <head> <link href="bootstrap.css" /> <link href="bootstrap.min.css" /> <link href="jquery-ui-1.10.2.custom.min.css" /> <title>POPUP Page</title> </head> <body> <!--<a href="#dataStatus_" class="modal">Link</a>--> <button id="showButton" value="Button" data-toggle="modal" data-backdrop="static"> Show</button> <script id="dataTemplate" type="text/x-javascript"> <div id="dataStatus_${data.empId}" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <a class="close" data-dismiss="modal">× </a> <div><h3> Edit </h3> </div> </div> <div class="modal-body"> <div class="row"> <div class="col-md-3"> <label> ID </label> </div> <div class="col-md-3"> <label> ${data.empId} </label> </div> </div> <div class="row"> <div class="col-md-3"> <label> Name </label> </div> <div class="col-md-3"> <label> ${data.empName} </label> </div> </div> <div class="row"> <div class="col-md-3"> <label> Number</label> </div> <div class="col-md-3"> <label> ${data.empNumber} </label> </div> </div> </div> <div class="modal-footer"> <button type="button" id="saveButton_${data.empId}">Save</button><!-- /.data-dismiss="modal" class="btn btn-primary"--> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </script> <script src="jquery-1.9.0.js" type="text/javascript"></script> <script src="bootstrap-modal.js" type="text/javascript"></script> <script src="bootstrap.min.js" type="text/javascript"></script> <script src="jquery.tmpl.min.js" type="text/javascript"></script> <script src="bootstrap.js" type="text/javascript"></script> <script src="bootstrap-multiselect.js" type="text/javascript"></script> <script> function setModalPopup() { debugger; var tempData = $.grep(data, function (item) { return item.empId; })[0]; var $TempDataStatus = $("<div></div>"); $TempDataStatus = $("#dataTemplate").tmpl({ context: this, data: tempData }); //$($TempDataStatus).modal(options); return '<a data-toggle="modal" href="#dataStatus_ ' + tempData.empId + '" > '; //$TempDataStatus.modal('#dataStatus_'); } // Hard Coded data var data = [{ empId: 1, empName: 'Harshal', empNumber: 9869472979 }, { empId: 2, empName: 'John', empNumber: 9869472799 }, { empId: 3, empName: 'Rock', empNumber: 9860272979 }]; $(function () { debugger; setButtonEvents(); }); function setButtonEvents() { $('#showButton').click(function (e) { debugger; setModalPopup(); }); } </script> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)