MagnificPopup 删除带有克隆内容的点击 link 并将弹出窗口包装在锚点中？

Question

我正在尝试使用宏伟的弹出窗口显示整个评论。到目前为止，我所拥有的是具有可点击名称的评论，该评论可克隆然后显示。

我运行遇到的问题是，当用户单击该名称时，该名称会从主要评论中删除。
此外，当弹出窗口打开时，它会被点击打开的锚点包裹起来？

下面的调用用于打开弹出窗口，如果你需要玩代码，你可以在这里 jsfiddle here http://jsfiddle.net/yj4yLjkx/

 $(".show-review").on('click', function () {

     var review = $(this).closest('li.review').clone();
     var addReview = $(this).html(review);
     var appendReview = $('#modal').prepend(addReview);

     $.magnificPopup.open({
         items: {
             src: appendReview
         },
         type: 'inline',
         callbacks: {
             close: function () {
                 $('#modal').empty();
             }
         }
     });
 });

body {
    background: grey; 
}
p {
 font-size: 1.3em;
}
#reviews ul.reviews,
li.review {
 list-style: none;
 margin: 0;
 padding: 0;
}
#reviews ul.reviews {
 margin: 1.8em 0;
}
#reviews .reviews li {
 width: 48%;
 float: left;
 padding: .5em 1.3em;
 position: relative;
 background: #fff;
 border-radius: 3px;
 box-shadow: 0 4px 6px -3px rgba(0,0,0,.3);
 margin-bottom: 2.2em;
}
#reviews .reviews li:after {
 content: "";
 position: absolute;
 bottom: 0;
 width: 93%;
 height: 60px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjczIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ4JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjgxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.73) 28%, rgba(255,255,255,0.81) 48%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(28%,rgba(255,255,255,0.73)), color-stop(48%,rgba(255,255,255,0.81)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 28%,rgba(255,255,255,0.81) 48%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 28%,rgba(255,255,255,0.81) 48%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 28%,rgba(255,255,255,0.81) 48%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.73) 28%,rgba(255,255,255,0.81) 48%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}
li.review header {
 border-bottom: 1px solid #ccc;
 padding: .8em 0 1.1em;
 position: relative;
}
li.review header time {
 display: block;
 clear: both;
 color: #aaa;
 font-size: 80%;
 position: absolute;
 bottom: 0;
}
li.review article {
 padding: .8em 0 0;
 color: #999;
}
li.review article h4 {
 font-size: 1.1em;
 font-family: open_sanssemibold;
 color: #333;
}

.review {
 background: #fff;
 max-width: 900px;
 margin: 0 auto;
}
.mfp-content .review {
 position: relative;
 margin: 0 auto;
 padding: 1em 1.2em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>



<div id="modal" class="mfp-hide"></div>

    <div id="reviews">
    
<ul class="reviews clearfix">
    <li id="review1" class="clearfix review">
        <header> 
            <strong><a href="#" class="show-review">Robert Elliot</a></strong>
            <time>2 hours ago</time>
        </header>
        <article>
             <h4>Very functionally rich hosting</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet pretium eros. In hac habitasse platea dictumst. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        </article>
    </li>
</ul>

    </div>

Answer 1

使用 "parents" 选择器克隆 "li" 元素并使用相同的元素呈现弹出视图。

$(this).html(review) 删除了 link，因此名称不可见。

参考以下代码：

 $(".show-review").on('click', function () {

        var review = $(this).parents('li.review').clone();
        var appendReview = $('#modal').html(review);

        $.magnificPopup.open({
            items: {
                src: appendReview
            },
            type: 'inline',
            callbacks: {
                close: function () {
                    $('#modal').empty();
                }
            }
        });
    });

MagnificPopup 删除带有克隆内容的点击 link 并将弹出窗口包装在锚点中？

MagnificPopup removes clicked link with cloned content and wraps popup in anchor?

jquery

magnific-popup