Question

场景：用户个人资料。我希望能够显示一个带有弹出窗口的用户名，该弹出窗口显示来自用户配置文件的有限数量的信息。到目前为止，我有那部分工作。我可以在飞行中构建它并让它做我需要的。 popover工作得很好。

我喜欢做的是让用户能够点击用户名并打开一个Bootstrap模式表单，其中包含有关用户的更多信息（如果提供）。我看到的第一个问题是，数据切换属性似乎只能有一个设置：

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'），我在这里得到了一些帮助 - 有可能从click事件中调用它吗？

// 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

您可以尝试：

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

要使回调功能正常工作，您需要将相应的data- *属性添加到每个<a>标记中。

Answer 2

当DOM显示模态时，您正在侦听模态以显示自己。

尝试使用类似的内容，然后使用带有data-toggle="modal"

的按钮或链接

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

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

Bootstrap Popover和一个模态（悬停并单击）

2 个答案: