pass href text to modal

Question

I have a table with usernames and the names of the users are links which when clicked show a modal. In this modal, the user's password can be changed. I want to get the text of the href in the modal. My code is below:

<td>
    <a href='#' data-toggle='modal' data-target='#useredit'>username</a>                
</td>

I want to see the username that was clicked in the modal.

<div id="useredit" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">User Edit</h4>
            </div>
            <div class="modal-body">
                <form class="forma" role="form" method="POST" action="#">
                    <div class="form-group">
                        <div class="form-group">
                            <label for="newpass">Password</label>
                            </label>
                            <input type="text" name="newpass" class="form-control" placeholder="Password must be 8 charachters long!" id="newpass" maxlength="20" />
                        </div>

                        <div class="form-group">
                            <label for="newpass2" >Retype Password</label>
                            </label>
                            <input type="password" name="newpass2" class="form-control" placeholder="Retype Password" id="newpass2" onkeyup="checkPass(); return false;" maxlength="20"/>
                            <span id="confirmMessage" class="confirmMessage"></span>
                        </div>
                    </div> 
                    <button type="submit" class="btn btn-default" id="btn1" >Submit</button>
                </form>
            </div>      
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

Answer 1

Two ways to achieve this

1st way Here is the link to learn how to use href to modal http://tutsme-webdesign.info/bootstrap-3-1-and-modals-with-remote-content/

2nd way (easiest way) :

Step 1 : Download bootbox.js from link http://bootboxjs.com/ and use it in your project.

  <script src="/bootbox.js"></script>

Step 2: Use function bootbox.dialog and pass your href url in message parameter

bootbox.dialog takes many parameters, some of they are:

1) title: title of the modal popup

2) message: you can pass content here using Jquery function e.g: $('').load(url),

3) onEscape : by pressing escape key , modal will automatically close

Here is the detail example by using bootbox.js:

 <script src="/bootbox.js"></script>    


 function OpenRemoteUrl() 
{
     var url = 'https://www.google.co.in';
         bootbox.dialog(
               {
                   title: "title of the modal box here",
                   message: $('<div></div>').load(url),
                   backdrop: true,
                   keyboard: true,
                   onEscape: function () { }
               });
 }


  <a id="alnkEditCompany"  href="javascript:void(0);" title="Edit" onclick="return OpenRemoteUrl()"> </a>

I am using bootbox.js in my project for bootstrap based project, and it is the easiest way to open a modal pop up for remote url

You can learn all the documentation from http://bootboxjs.com

Answer 2

You can use .on(shown.bs.modal) of bootstrap as below and get its relatedTarget of event and fetch its text as below:

DEMO

$('#useredit').on('shown.bs.modal',function(e){
    $(this).find('.modal-title').html($(e.relatedTarget).text());
});