Question

我一直在修改我的tumblr页面以显示模态中的帖子。我添加了模态，但是当我点击帖子时，帖子详细信息不会显示在模态中。

我使用了一个免费主题，其中应用了砌体网格，博客显示了一个帖子网格。

目前我在{block：Posts}之外有模态。如果我在{block：Posts}里面有模态，我会在彼此之上打开10个模态。虽然帖子细节确实显示在模态内。（10是当前页面上的帖子数量。）

如果我在{block：Photo}中有模态，我会在砌体网格中显示所有模态。

我的tumblr的当前状态： http://cnocle.tumblr.com/
我想要实现的目标： http://fifth-avenue-theme.tumblr.com/

任何帮助，建议，指示都会很棒！

如果我要发布代码，请告诉我。这很长，我不确定我是否应该发布它。

以下代码是最重要的部分谢谢

<body>

<script type="text/javascript" src="http://static.tumblr.com/ek9ly4s/Yfzmx9hib/jquery.ms.js"></script>

<link href="http://static.tumblr.com/ek9ly4s/0WMmx9ghw/homemade-ii.css" rel="stylesheet">

<div id="header">

    <div class="xnav">
        {block:ifshowblogtitle} <a href="/"><img src="http://static.tumblr.com/ksc6s4f/dWtnk041m/cnocle-logo.png"/></a> // {/block:ifshowblogtitle}
        {block:ifshowdescription}
        {block:Description}<p>{Description}</p> //{/block:Description} {/block:ifshowdescription}
        <a href="/">Home</a> /
        {block:AskEnabled}<a href="/ask" title="{AskLabel}">{text:Ask Title}</a> /{/block:AskEnabled}
        {block:ifLinkOneTitle}
        <a href="{text:Link One}">{text:Link One Title}</a> / {/block:ifLinkOneTitle}
        {block:ifLinkTwoTitle}
        <a href="{text:Link Two}">{text:Link Two Title}</a> / {/block:ifLinkTwoTitle}
        {block:ifLinkThreeTitle}
        <a href="{text:Link Three}">{text:Link Three Title}</a> / {/block:ifLinkThreeTitle}
        {block:ifLinkFourTitle}
        <a href="{text:Link Four}">{text:Link Four Title}</a> / {/block:ifLinkFourTitle}
        {block:ifLinkFiveTitle}
        <a href="{text:Link Five}">{text:Link Five Title}</a> / {/block:ifLinkFiveTitle}
        {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> / {/block:Pages} {/block:HasPages}
        {block:iftextonlineusercounter}
        {text:text online user counter} /
        {/block:iftextonlineusercounter}
        <a href="/archive" title="View my blogging history." target=_"blank">Archive</a> /
        <a href="http://homemadethemes.tumblr.com" title="Theme Maker">Theme</a>

    </div><div class="spacer"> </div></div>

<div id="content">

{block:Posts}
<div class = "autopagerize_page_element" >
    <div class="entry">
        {block:Photo}
        {block:IndexPage}
        <div class="photo">
            <img src="{PhotoUrl-250}" alt="{PhotoAlt}"/>
        </div>
        {/block:IndexPage}
        {/block:Photo}

        {block:PermalinkPage}
        <div style="display:block;">
            <img src="{PhotoUrl-500}" alt="{PhotoAlt}"/>
            {block:NoteCount}{NoteCountWithLabel}
            <div style="margin-top:5px;"></div>{/block:NoteCount}

            {block:HasTags} &middot; {block:Tags}<a href="{TagURL}"> #{Tag}</a>
            <div style="margin-top:5px;"></div>{/block:Tags}{/block:hasTags}

            {block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}

            {block:PostNotes}
            <div style="width:500px;height:250px;overflow-y:scroll;overflow-x:hidden;margin-left:-5px;">{PostNotes}</div>
            {/block:PostNotes}
        </div>

    </div>

    {/block:Posts}
    <!--

            Start of Modal

          -->

        <div class="modal-content drop-shadow">
            <div class="product-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aliquam corporis distinctio ea in incidunt ipsum molestiae molestias mollitia officiis possimus quis quod, ratione veritatis voluptate voluptatibus? A, amet.</div>
            <div class="product-image"><img src="" alt="{PhotoAlt}" /></div>
        </div>

        <div class="modal-overlay"></div>

        <!--

            End of Modal

          -->

        <script type="text/javascript">
            $(document).ready(function() {
                $(".entry").click(function(){
                    var imgSrc = $(".photo").children("img").attr("src");

                    $(".product-image img").attr("src",imgSrc);
                    $(".modal-overlay").addClass("modal-show");
                    $(".modal-content").addClass("modal-content-show");
                });
                $(".btn-modal-close").click(function() {
                    $(".modal-overlay").removeClass("modal-show");
                });
                $(".modal-overlay").click(function() {
                    $(".modal-overlay").removeClass("modal-show");
                    $(".modal-content").removeClass("modal-content-show");
                })
            });
        </script>
</div>

tumblr customization - 以模态显示帖子详细信息

0 个答案: