从Bootstrap Popover调用Bootstrap Modal

Question

目标：我想从引导弹出调用引导模式。我正在查看Calling a modal from a Bootstrap popover，并试图实现代码。

popover ：单击从弹出窗口内部触发模态的按钮，会使背景变暗，但没有显示模态。不知道到底是什么问题。我从上面链接的文章中尝试的代码给出了相同的结果，就像我只是设置按钮来触发一个模型，而没有文章中的建议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

我找到了这个问题的答案。我认为我应该尝试从popover外部调用模式(即页面中某个地方按下按钮来调用该模式，以查看问题是否像我最初得出的结论那样与popover隔离)。一旦我在其他地方添加了同样的按钮，我就没什么可做的了。然后，我意识到模态的代码在弹出器中，所以我取了这个代码，把它放在弹出部分之外。当我点击新的按钮时，我看到了一个按预期出现的模态，但接着我点击了原来的按钮，我试图用它来调用模态，然后它也触发了模态。所以这告诉我，当弹出器被触发时，它必须执行模态，但永远不会显示它或者其他什么东西到那个程度。因此，我将删除模式的代码之外的弹出代码，它将工作得很好。长篇大论的回答，但希望找到答案的旅程也能帮助到其他人。

另外，需要注意的是，如果使用引导程序3，您不需要编写任何花哨的jquery代码来显示模型，或者我在文章开头引用的文章中的任何建议。