将ID传递给引导程序模式？

Question

I'm using squarespaceModal from this site

I would like to know if is it possible to pass the id to the code of the modal ? This is the button who's calling the modal :

<div class="center">
    <button id="<?php echo $i; ?>" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">
        update
    </button>
</div>

This is the first line of the modal :

<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">

Answer 1

That is just a standard Bootstrap Modal I dont see anything special about it. Therefore you have all the events you would like from the modal.

So you "could" write an event to trap everytime a modal is opened.

 $(function() { $('#myModal').on('shown.bs.modal', function() { alert($(this).attr('id')) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> <button id="myButton" data-target="#myModal" data-toggle="modal" class="btn btn-primary">Open</button> <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal"> <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="gridSystemModalLabel">Modal title</h4> </div> <div class="modal-body"> This is my modal body </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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 2

On your button click set the require value into your input fields of modal and then show modal using below code.

$(".update_pro").click(function () {
    $('#txtYourTexbBoxWithinModal').val($(this).data('id')); // or something eslse.
    $('#squarespaceModal').modal('show');
});

If come across issue of displaying modal then remove

data-target="#squarespaceModal"

Cheeerssss

Answer 3

Here you go with a solution https://jsfiddle.net/32jsq6aL/

 $('button[data-toggle="modal"]').click(function(){ $($(this).data('target')).attr('btn-id', $(this).attr('id')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="center"> <button id="test 1" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">update</button> </div> <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> </div> 

OnClick on the button , get the data-target and attach an attribute btn-id as button id to the targeted modal .

Hope this will help you.