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

问题描述 投票:0回答:1

我有一个模态和一个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' />

如果打开模态,它会水平居中,但我想在展开它的元素的底部显示它。

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

我用谷歌搜索了几个小时没有结果。

谢谢。

jquery twitter-bootstrap-3
1个回答
0
投票

我认为你最好使用'popover',看看这些bootstraps例如:

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>

© www.soinside.com 2019 - 2024. All rights reserved.