Question

目标：我想从bootstrap popover调用bootstrap模式。我正在查看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>

Answer 1

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

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

从Bootstrap Popover调用Bootstrap模式

1 个答案: