从 Bootstrap Popover 调用 Bootstrap Modal答案

【问题标题】：Calling Bootstrap Modal from Bootstrap Popover从 Bootstrap Popover 调用 Bootstrap Modal
【发布时间】：2016-12-17 20:31:24
【问题描述】：

目标：我想从引导弹出框调用引导模式。我正在查看Calling a modal from a Bootstrap 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>

【问题讨论】：

标签： javascript jquery twitter-bootstrap modal-dialog popover

【解决方案1】：

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

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

【讨论】：