MagnificPopup удаляет нажатую ссылку с клонированным контентом и помещает всплывающее окно в якорь?

Я пытаюсь показать весь обзор, используя увеличенное всплывающее окно. У меня есть обзор с кликабельным названием, которое клонируется, а затем отображается.

  1. Проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь нажимает на имя, имя удаляется из основных обзоров.

  2. Также, когда всплывающее окно открыто, оно затем оборачивается якорем, по которому щелкнули, чтобы открыть его?

Вызов ниже используется для открытия всплывающего окна, если вам нужно поиграть с кодом, вы можете сделать это здесь jsfiddle здесь 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>

Источник

1 ответ

Решение

Используйте селектор "parent", чтобы клонировать элемент "li", и используйте его для отображения всплывающего окна.

$(this).html(review) удаляет ссылку, следовательно имя не видно.

Обратитесь к коду ниже:

 $(".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();
                }
            }
        });
    });
Источник
Другие вопросы по тегам