Question

这是我的HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="file_img"><img src="http://i.hdws.org/f/7d8a/r/b6727a3685.jpg" width="150px" height="150px"></div>


        <div id="boxes">
            <div id="mask"></div>
            <div class="window" id="file_viewer_window">
                <table class="modalWindow">

                    <tr>
                        <td><div id="img_src"></div></td>
                    </tr>
                    <tr>
                        <td><div id="object_preview"></div></td>
                    </tr>
                    <tr>
                        <td><a href="" id="window_close" class="close">close</a></td>
                    </tr>
                </table>
            </div>
        </div>

css代码：

#mask {
            top: 0;
            position: absolute;
            z-index: 9000;
            background-color: yellow;
            display: none;          
            }

            #boxes .window {
            display: none;
            z-index: 9999;
            }

            #file_viewer_window {
            position: absolute;
            background-color: green;
            padding:10px;
            border: 1px black solid;

            }

            a#window-close {
            font-size: 15px;
            color: black;
            border: 1px black solid;
            }

            table.modalWindow {

            color: black;
            background: white;
            text-align: center;

            }

            img{
           max-width: 100%;
             max-height: 100%;
            }

            #img_src {

            }

我的jQuery代码：

$(document)
            .on(
            'click',
            '#file_img',
            function() {
                var viewedFileName = $(this)
                .parent().find(
                "#file_name")
                .find("a").text();
                console.log(viewedFileName);
                var id = $('#file_viewer_window');
                // Get the screen height and width
                var maskHeight = $(document)
                .height();
                var maskWidth = $(window)
                .width();

                // Set height and width to mask to fill up the whole screen
                $('#mask').css({
                    'width' : maskWidth,
                    'height' : maskHeight
                });

                // transition effect
                $('#mask').fadeIn(1000);
                $('#mask').fadeTo("slow", 0.8);

                // Get the window height and width
                var winH = $(window).height();
                var winW = $(window).width();

                var modalH = winH - winH*0.3;
                var modalW = winW - winW*0.3;

                // Set the popup window to center
                $(id).css('top', 0);

                // transition effect
                $(id).fadeIn(2000);
                var displayImage = "<img src=\"http://i.hdws.org/f/7d8a/r/b6727a3685.jpg\" >";
                id
                .find(
                "#img_src").find('img')
                .remove();



                id              .find(              "#img_src")             .append(                displayImage);

                    $(id).width(modalW).height(modalH);     



                $('.window .close').click(function(e) {
                    // Cancel the link behavior
                    e.preventDefault();
                    $('#mask, .window').hide();
                });
                // if mask is clicked
                $('#mask').click(function() {
                    $(this).hide();
                    $('.window').hide();
                });
            });

我正在尝试将该图片调整为以新宽度和高度点击时出现的绝对div 图片打开时需要图片在绿色div内但不知何故，当我更改绝对定位#file_viewer_window的宽度和高度时，附加到该div的图片taht不会改变与父div对应的尺寸谢谢！

Answer 1

尝试this。

关键是使用包含position: relative;的包装容器。 this post

中的更多信息

如何将图片放到绝对定位模态窗口？

1 个答案: