从Bootstrap Popover调用Bootstrap Modal

Question

目标 ：我想从自举弹出窗口中调用自举模式。 我当时正在研究从Bootstrap弹出窗口调用模式，并尝试实现代码。

问题 ：单击从弹出框内部触发模式的按钮时，它将使背景变暗，但没有模式出现。 不确定到底是什么问题。 我在上面的链接文章中尝试过的代码产生的结果与在该文章中没有设置jQuery的情况下只是设置按钮以触发模式的效果相同。目前，我的代码已设置为使用此处建议的建议。我到目前为止所拥有的...

在此先感谢所有帮助。

   $(function () {
      $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
            return $('#popover-content').html();
        }
      });

        $(document).on('click', "#messageUser", function() {
            console.log('Clicked message button');
            $('#messageUserModal').modal('show');
        });
    });

    /* --Tried this too, thinking the popover and modal were fighting
    $(function() {
        $('#messageUser').click(function() {
            console.log('Clicked message button');
            //$('[data-toggle="popover"]').hide();
            $('#messageUserModal').modal('show');
            //$('#messageUserModal').show();
        });
    });
    */

HTML / PHP / BS

<button class='btn btn-xs btn-primary' type='button' id='messageUser'>Send Message</button>
                </form>

                <div class='modal fade' id='messageUserModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
                  <div class='modal-dialog' role='document'>
                    <div class='modal-content'>
                      <div class='modal-header'>
                        <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
                        <h4 class='modal-title' id='myModalLabel'>Send Message to ".$helperName." </h4>
                      </div>
                      <div class='modal-body'>
                        <textarea class='form-control' name='message' maxlength='749' rows='10' cols='50' placeholder='Enter message to ".$helperName." here..'></textarea><br>
                      </div>
                      <div class='modal-footer'>
                        <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
                        <button type='button' class='btn btn-primary'>Send Message</button>
                      </div>
                    </div>
                  </div>
                </div>

Answer 1

我找到了问题的答案。我以为我应该尝试从弹出窗口外部调用模式（即页面上某处的按钮以按此模式调用该模式，只是为了查看问题是否与弹出窗口无关）就像我最初得出的结论..）。 一旦在其他位置添加了相同的按钮，我什么也不会发生。 然后我意识到模态的代码在弹出窗口中，因此我将代码放到了弹出窗口之外。 然后，当我单击新按钮时，我看到一个模态如预期的那样出现，但是随后，我单击了我试图调用该模态的原始按钮，然后它又触发了模态..这样告诉我何时弹出式窗口被触发，它必须正在执行模态，但从不显示它或达到某种程度..因此，我将在弹出式代码之外删除模式的代码，它将正常工作。 漫长的答案，但希望获得答案的旅程也会对其他人有所帮助。

另外，需要注意的重要一点是，如果使用bootstrap 3，则无需编写任何奇特的jquery代码来显示模式，也不需要我在文章开头引用的文章中提出的任何建议。