Question

我有一个带有用户名的表，用户名是链接，点击后显示模态。在此模式中，可以更改用户的密码。我想在模态中获取href的文本。我的代码如下：

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

我想查看模态中点击的用户名。

<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

您可以使用.on(shown.bs.modal) bootstrap，如下所示获取事件的relatedTarget并获取其文字如下：

<强> DEMO

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

Answer 2

实现此目的的两种方法

第一种方式 这是学习如何将href用于模态的链接 http://tutsme-webdesign.info/bootstrap-3-1-and-modals-with-remote-content/

第二种方式（最简单的方式）：

第1步：从链接http://bootboxjs.com/下载bootbox.js 并在你的项目中使用它。

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

第2步： 使用函数bootbox.dialog并在消息参数

中传递href url

bootbox.dialog有很多参数，其中一些是：

1）title：模态弹出窗口的标题

2）消息：您可以使用Jquery函数在此处传递内容例如：$（''）。load（url），

3）onEscape：按下退出键，模态将自动关闭

以下是使用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>

我在项目中使用bootbox.js进行基于bootstrap的项目，这是打开远程url模式弹出窗口的最简单方法

您可以从http://bootboxjs.com

了解所有文档

将href文本传递给模态

2 个答案:

以下是使用bootbox.js的详细示例：