Question

我正在开发一个带有bootstrap和modal的灯箱库。一切都工作正常，除了我的模态打开在我的页面顶部而不是在内部。我该如何防止这种情况？我的想法是打开modal inside section（dreams-wrapper）。

这是我的代码：

<section role="dreams-wrapper">
<div class="container-fluid">
    <div class="row">
        <!-- gallery thumbnails -->
        <div class="col-xl-2 dreams-thumb">
            <a title="Image 1" href="#">
                <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/images/thumbnail-1.png">
            </a>
        </div>
        <div class="col-xl-2 dreams-thumb">
            <a title="Image 1" href="#">
                <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/images/thumbnail-2.png">
            </a>
        </div>
        <div class="col-xl-2 dreams-thumb">
            <a title="Image 1" href="#">
                <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/images/thumbnail-3.png">
            </a>
        </div>
        <div class="col-xl-2 dreams-thumb">
            <a title="Image 1" href="#">
                <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/images/thumbnail-4.png">
            </a>
        </div>
        <div class="col-xl-2 dreams-thumb">
            <a title="Image 1" href="#">
                <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/images/thumbnail-5.png">
            </a>
        </div>
        <div class="col-xl-2 dreams-thumb">
            <a title="Image 1" href="#">
                <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/assets/images/thumbnail-6.png">
            </a>
        </div>
    </div>
    <div tabindex="-1" class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                  <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal">×</button>
                    <h3 class="modal-title">Heading</h3>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
             </div>
        </div>
    </div>
</section>

JS：

$(document).ready(function() {
  $('.dreams-thumb').click(function(){
      $('.modal-body').empty();
      $($(this).html()).appendTo('.modal-body');
      $('#myModal').modal({show:true});
  });
});

有什么想法吗？感谢

Answer 1

这将是一个选项

$(document).ready(function() {
  $('.dreams-thumb').click(function(){
      $('.modal-body').empty();
      $('.modal-body').html($(this).html());
      $('.modal-dialog').css('margin-top',$(this).closest('section').offset().top);
      $('#myModal').modal({show:true});
  });
});

如何在一个部分内打开bootstrap模态而不是在主体顶部？

1 个答案: