将 href 文本传递给模态

Question

我有一个带有用户名的 table，用户名是链接，单击时会显示模态。在此模式中，可以更改用户的密码。我想在模态中获取 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

两种实现方式

第一种方式 这里是 link 学习如何使用 href 到模态 http://tutsme-webdesign.info/bootstrap-3-1-and-modals-with-remote-content/

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

步骤 1：从 link 下载 bootbox.js http://bootboxjs.com/ 并在您的项目中使用它。

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

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

中传递你的 href url

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

1) title: 弹窗的标题

2) 消息：您可以使用 Jquery 函数在此处传递内容例如：$('').load(url),

3) onEscape : 按escape键，模态会自动关闭

这里是使用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>

我在基于 bootstrap 的项目中使用 bootbox.js，这是为远程 url

打开模态弹出窗口的最简单方法

您可以从http://bootboxjs.com

了解所有文档

Answer 2

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

DEMO

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

将 href 文本传递给模态

pass href text to modal

jquery

modal-dialog

href

这里是使用bootbox.js的详细示例：