Bootstrap 弹出框和模态框（悬停并单击）

Question

场景：用户个人资料。我希望能够显示带有弹出框的用户名，该弹出框显示来自用户配置文件的有限信息。到目前为止，我已经完成了这部分工作。我可以即时构建它并让它做我需要的事情。弹出窗口完美地工作。

我希望也做的是让用户能够点击用户名并调出一个引导模式表单，其中包含有关用户的更多信息（如果提供）。我看到的第一个问题是 data-toggle 属性似乎只能有一个设置：

echo '<a href="#" class="trigger userprof" data-toggle="popover" data-target="#userModal" data-popover-content="#content' . $user_row['user_id'] . '">' . $user_row['user_name'] . '</a>';

在那个例子中，如果我将模式添加到 data-toggle 属性中，它似乎对我没有多大好处。

我通过修补发现（这就是为什么上面代码中的类 'userprof' 的原因），可以触发 JavaScript 点击事件（现在我所做的只是一个基本的 JS 警报对话框来测试），但从那里我想加载模态。我不确定我是否能让这一切顺利进行。

我有一组函数已成功用于另一个模式（称为“userModal”），不久前我从这里的某个人那里得到了一些帮助——是否可以从点击事件中调用它？

// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
   var button = $(event.relatedTarget); // Button that triggered the modal
   var title = button.data('title'); // Extract info from data-* attributes
   var body = button.data('body'); // Extract info from data-* attributes
   var modal = $(this);
   modal.find('.modal-title').text( title );
   modal.find('.modal-body').append( body );
});

// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
    $(this).find(".modal-body").text('');
});

由于这些是“匿名”函数，我不确定我是否可以调用它们......在这里的代码中感觉有点迷失。任何为我指明正确方向的帮助都会很棒。我什至愿意考虑一个不同的想法，但我希望这种功能 （悬停和单击） 用于这种情况，可能还有其他用途。谢谢！

Answer 1

当 DOM 显示模态时，您正在监听模态显示自身。

尝试使用类似的东西，并使用带有data-toggle="modal"的按钮或链接

$(document).on('hidden.bs.modal', '#userModal', function ()
{
    $(this).find(".modal-body").text('');
});

供参考https://jsfiddle.net/y063mu4t/1/

Answer 2

你可以试试：

$(document).on('click', 'a.userprof', function(){
    $('#userModal').modal('show'); 
});

为了让你的回调函数正常工作，你需要给每个<a>标签添加相应的data-*属性。