Question

我正在使用Simple Modal插件在我的网页中创建一张小狗

<script src="/scripts/jquery.simplemodal.js"></script>
<div>
  <div class="txt-panel" id="124853" >

    <div class="container">
      <p>some text,...<a href="#" class="poper"> read more</a></p>
      <p class="popup" style="display:none" id="P1">More text, this will be a popup</p>
    </div>
  </div>
  <div class="txt-panel" id="5464641" >

    <div class="container">
      <p>some text2,...<a href="#" class="poper"> read more</a></p>
      <p class="popup" style="display:none" id="P2">More text, this will be a popup2</p>
    </div>
  </div>
</div>

脚本

$(function(){
  $(".poper").click(function(e){
    $(this).parents('.container').find(".popup").modal({
      overlayClose:true,
      escClose:true,
      maxWidth:500,
      overlayClose: true,
      opacity:50,
      containerCss:{background:"#f5d495"}
    });
    event.preventDefault();
  });
});

这很好用。但唯一的问题是PopUp位于页面的中心。但我希望弹出窗口位于我的锚标签上方（class =“popup”）。是否可以使用Simple Modal弹出窗口。或者还有其他更好的方法来实现我想要实现的目标吗？像任何其他插件一样？

注意：Fiddle

Answer 1

您可以设置位置选项

    $(function(){
      var anchorPosition = $(".popup").position();
      $(".poper").click(function(e){
        e.preventDefault();
        $(this).parents('.container').find(".popup").modal({
          overlayClose:true,
          escClose:true,
          maxWidth:500,
          overlayClose: true,
          opacity:50,
          position:[anchorPosition.top,anchorPosition.left],
          containerCss:{background:"#f5d495"}
       });

      });
    });

Answer 2

你的小提琴无法奏效，但我认为你也可以使用jQuery＆＃39; .appendTo();并将模态粘贴到所需的相对容器上，以便更好地控制位置。这应该发生在模态之前弹出。

将简单模态PopUp定位在触发链接附近

注意：Fiddle

2 个答案: