从 Bootstrap 弹出窗口调用 Bootstrap 模式

Question

目标：我想从 bootstrap 弹出窗口调用 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 代码来显示模态，或者我在post..

的开头

从 Bootstrap 弹出窗口调用 Bootstrap 模式

Calling Bootstrap Modal from Bootstrap Popover

javascript

jquery

twitter-bootstrap

modal-dialog

popover