Question

我有一个模态和一个p来打开它。

  <div class="">
      <div class="modal fade" id="post_wall_feeling_modal" role="dialog">
        <div class="modal-dialog" style="width: 500px;">
          <div class="modal-content"> 
            <div class="modal-body" id="modal_height_feeling_chosen_activity">
                ......
            </div>                   
          </div>       
        </div>       
      </div> 
</div> 

<p  data-toggle='modal' data-target='#post_wall_feeling_modal' data-whatever='@mdo' />

如果打开了模态，它将水平居中，但是我想在打开它的元素的底部显示他。

我想知道模态是否可能在打开它的元素附近打开？

我搜索了几个小时，没有结果。

谢谢。

Answer 1

我认为您最好使用'popover'，例如以下引导程序：

https://jsfiddle.net/tom_lima/bjy381zp/3/

它们是专门为此目的而制成的，在靠近单击元素的位置打开。另外，您可以使用data-placement参数定义出现的位置

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
    <button type="button" title="Dismissible popover" class="btn btn-secondary" data-container="body" data-html="true"  data-toggle="popover" data-placement="top" data-content="<b>Vivamus sagittis lacus vel augue laoreet rutrum faucibus.</b>">
    Popover on top
    </button>

    <button type="button"  title="Dismissible popover" class="btn btn-secondary" data-html="true" data-container="body" title="Dismissible popover" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
    </button>

    <button type="button" title="Dismissible popover" data-html="true" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
    sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
    </button>

    <button type="button" title="Dismissible popover" data-html="true" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left
    </button>

    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            $('[data-toggle="popover"]').popover()
        })
    </script>

</body>

在打开它的元素底部打开模式

1 个答案: