Question

我正在使用此代码方法http://www.jqueryscript.net/lightbox/Super-Simple-Modal-Popups-with-jQuery-CSS3-Transitions.html来显示此页面上的弹出窗体http://imagespace.businesscatalyst.com/canon-dr-systems.html点击“查询”链接会激活弹出窗口模块。我的问题是弹出框由脚本放在页面的顶部，它是添加style =＆＃34; top：204.5px;＆＃34;到主要的div，这把它放在屏幕上。理想情况下，我希望它弹出与激活它的项目相同的位置。我完全不确定如何更改以下内容以影响这一点，对它的任何帮助都非常感激。

（我暂时添加了一个边距为600px的类，它将模块推向需要的位置，但这不是一个理想的修复方法。）

<script>
        $(function() {

            var appendthis = ("<div class='modal-overlay js-modal-close'>   </div>");

            $('a[data-modal-id]').click(function(e) {
                e.preventDefault();
                $("body").append(appendthis);
                $(".modal-overlay").fadeTo(500, 0.7);
                //$(".js-modalbox").fadeIn(500);
                var modalBox = $(this).attr('data-modal-id');
                $('#' + modalBox).fadeIn($(this).data());
            });


            $(".js-modal-close, .modal-overlay").click(function() {
                $(".modal-box, .modal-overlay").fadeOut(500, function() {
                    $(".modal-overlay").remove();
                });

            });

            $(window).resize(function() {
                $(".modal-box").css({
                    top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
                    left: ($(window).width() - $(".modal-box").outerWidth()) / 2
                });
            });

            $(window).resize();

        });
    </script>

Answer 1

我检查了你的website。并建议在CSS下面申请。即，制作模态弹出窗口position:fixed;。它会帮助你在同一个地方弹出。

.modal-box {
    display: block;
    top: 0;
    left: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 99999;
    margin: auto;
}

同时从js中删除窗口调整大小功能。

   /* $(window).resize(function() {
        $(".modal-box").css({
            top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
            left: ($(window).width() - $(".modal-box").outerWidth()) / 2
        });
    });*/

弹出脚本定位弹出模块太高

1 个答案: