在 prettyphoto 灯箱上，如何将 X 或关闭按钮移动到右上角？答案

【问题标题】：On prettyphoto lightbox how do you move the X or close button to upper right?在 prettyphoto 灯箱上，如何将 X 或关闭按钮移动到右上角？
【发布时间】：2012-04-19 19:20:58
【问题描述】：

如何在漂亮照片灯箱上将 X 或关闭按钮移动到右上角？

【问题讨论】：

标签： jquery prettyphoto

【解决方案1】：

阅读the documentation后，看来您必须在创建时重写参数中的markup属性。

将 HTML 带到那里并将其重写为您喜欢的任何内容。

<script type="text/javascript" charset="utf-8">

    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({ // the default markup follows
            markup: '<div class="pp_pic_holder"> \
                        <div class="ppt">&nbsp;</div> \
                        <div class="pp_top"> \
                            <div class="pp_left"></div> \
                            <div class="pp_middle"></div> \
                            <div class="pp_right"></div> \
                        </div> \
                        <div class="pp_content_container"> \
                            <div class="pp_left"> \
                            <div class="pp_right"> \
                                <div class="pp_content"> \
                                    <div class="pp_loaderIcon"></div> \
                                    <div class="pp_fade"> \
                                        <a href="#" class="pp_expand" title="Expand the image">Expand</a> \
                                        <div class="pp_hoverContainer"> \
                                            <a class="pp_next" href="#">next</a> \
                                            <a class="pp_previous" href="#">previous</a> \
                                        </div> \
                                        <div id="pp_full_res"></div> \
                                        <div class="pp_details"> \
                                            <div class="pp_nav"> \
                                                <a href="#" class="pp_arrow_previous">Previous</a> \
                                                <p class="currentTextHolder">0/0</p> \
                                                <a href="#" class="pp_arrow_next">Next</a> \
                                            </div> \
                                            <p class="pp_description"></p> \
                                            {pp_social} \
                                            <a class="pp_close" href="#">Close</a> \
                                        </div> \
                                    </div> \
                                </div> \
                            </div> \
                            </div> \
                        </div> \
                        <div class="pp_bottom"> \
                            <div class="pp_left"></div> \
                            <div class="pp_middle"></div> \
                            <div class="pp_right"></div> \
                        </div> \
                    </div> \
                    <div class="pp_overlay"></div>'
        });
    });
</script>

【讨论】：

不客气 - 不要忘记接受您最喜欢的问题答案。

【解决方案2】：

根据您使用 prettyPhoto 的方式，您可以通过编辑 CSS 来实现您想要的。

前：

这会将详细信息移到顶部

.pp_details{
    position: absolute;
}

这会调整关闭按钮的位置。

a.pp_close {
    top: -12px;
}

【讨论】：