Я работаю над реализацией всплывающего окна входа в систему с использованием этого фреймворка и застрял с вопросом, как программно открыть и закрыть указанное всплывающее окно, не имея соответствующей ссылки? Ваша документация великолепна, но, к сожалению, я ничего не нашел в этом отношении.
Не могли бы вы предоставить, Всплывающее окно не должно закрываться при нажатии на аккордеоне, Все остальное нужно нажать, а затем закрыть.
Я использую этот код ..
$('.simple-ajax-popup-align-top').magnificPopup({
type: 'ajax',
alignTop: true,
closeOnContentClick: false,
fixedContentPos: true,
closeBtnInside: false,
callbacks: {
open: function () {
// Remove close on popup bg v1.5
$.magnificPopup.instance.close = function() {
if (!isMobile && !$('body').hasClass('test-custom-popup-close') ){
$.magnificPopup.proto.close.call(this);
} else {
$( 'button.mfp-close' ).live( 'click', function() {
$.magnificPopup.proto.close.call(this);
});
}
}
$( '.wpcf7 > form' ).each( function() {
var $form = $( this );
wpcf7.initForm( $form );
if ( wpcf7.cached ) {
wpcf7.refill( $form );
}
var url_push = window.location.href,
formAction = $form.parent().attr( 'id' );
$form.attr( 'action', url_push + '#' + formAction );
});
}
}
});
HTML:
<section class="parent-section no-padding post-19010 portfolio type-portfolio status-publish format-standard hentry portfolio-category-portfoliocategory1">
<div class="container">
<div class="row">
<div class="blog-details-text portfolio-single-content">
<div class="entry-content">
<section>
<div class="container">
<div class="row">
<div class="wpb_column test-column-container vc_col-sm-12 col-xs-mobile-fullwidth" data-front-class="col-xs-mobile-fullwidth">
<div class="vc-column-innner-wrapper">
<div class="panel-group accordion-style1" id="1571032355">
<div class="panel panel-default">
<div class="panel-heading ">
<a data-toggle="collapse" data-parent="#1571032355" href="#accordian-panel-1" class="collapsed">
<h4 class="panel-title">Accordian 1<span class="pull-right"><i class="fas fa-plus"></i></span></h4>
</a>
</div>
<div id="accordian-panel-1" class="panel-collapse collapse ">
<div class="panel-body">
<div class="col-md-2 col-sm-2 col-xs-6 no-padding xs-margin-bottom-five"><img width="1920" height="960" src="http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo.jpg" class="white-round-border no-border spa-packages-img" alt="" srcset="http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo.jpg 1920w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-300x150.jpg 300w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-768x384.jpg 768w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-1024x512.jpg 1024w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-81x41.jpg 81w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-600x300.jpg 600w" sizes="(max-width: 1920px) 100vw, 1920px"></div>
<div class="col-md-9 col-sm-9 col-xs-12 sm-pull-right col-md-offset-1 no-padding">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading ">
<a data-toggle="collapse" data-parent="#1571032355" href="#accordian-panel-2" class="collapsed">
<h4 class="panel-title">Accordian 2<span class="pull-right"><i class="fas fa-plus"></i></span></h4>
</a>
</div>
<div id="accordian-panel-2" class="panel-collapse collapse ">
<div class="panel-body">
<div class="col-md-2 col-sm-2 col-xs-6 no-padding xs-margin-bottom-five"><img width="1920" height="960" src="http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo.jpg" class="white-round-border no-border spa-packages-img" alt="" srcset="http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo.jpg 1920w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-300x150.jpg 300w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-768x384.jpg 768w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-1024x512.jpg 1024w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-81x41.jpg 81w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-600x300.jpg 600w" sizes="(max-width: 1920px) 100vw, 1920px"></div>
<div class="col-md-9 col-sm-9 col-xs-12 sm-pull-right col-md-offset-1 no-padding">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading ">
<a data-toggle="collapse" data-parent="#1571032355" href="#accordian-panel-3" class="collapsed">
<h4 class="panel-title">Accordian 3<span class="pull-right"><i class="fas fa-plus"></i></span></h4>
</a>
</div>
<div id="accordian-panel-3" class="panel-collapse collapse ">
<div class="panel-body">
<div class="col-md-2 col-sm-2 col-xs-6 no-padding xs-margin-bottom-five"><img width="1920" height="960" src="http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo.jpg" class="white-round-border no-border spa-packages-img" alt="" srcset="http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo.jpg 1920w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-300x150.jpg 300w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-768x384.jpg 768w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-1024x512.jpg 1024w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-81x41.jpg 81w, http://jaguar/wordpress_versions/utsav/latest-test-test/wp-content/uploads/2019/10/hero-Cameo-600x300.jpg 600w" sizes="(max-width: 1920px) 100vw, 1920px"></div>
<div class="col-md-9 col-sm-9 col-xs-12 sm-pull-right col-md-offset-1 no-padding">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
CSS:
.panel > div { transition-duration: .2s; -moz-transition-duration: .2s; -webkit-transition-duration: initial; -o-transition-duration: .2s; }
.panel-heading { padding-bottom:15px; }
.panel-title { background-color: #fff; color: #767676; font-size: 12px; letter-spacing:2px; font-weight: 400; width:100%; display: block; padding: 10px 18px; border: 1px solid rgba(0, 0, 0, .1); text-transform: uppercase; }
.panel-body { padding:10px 18px 25px 18px; font-size: 13px; line-height: 23px; }
.panel-heading i { font-size:10px; margin: 0; }
.active-accordion .panel-title { color: #000; }
.accordion-style2 .panel-title { background-color:#000; color: #fff; }
.accordion-style2 .panel-heading i { font-size:18px; margin: 0; color:#fff; padding-top:5px; }
.accordion-style3 .panel-title { background-color:#ededed; color: #000; position:relative; border: none; padding:0 25px; font-size: 14px; line-height: 70px; font-weight: 600; }
.accordion-style3 .panel-heading { padding-bottom:30px; }
.accordion-style3 .panel-heading i { font-size:20px; margin: 0; color:#000; position: relative; top:3px; }
.accordion-style3 .panel-body { padding: 0 60px 35px 25px; }
.accordion-style3 .number { font-size: 18px; font-weight: 600; margin-right:10px; position: relative; top: 1px; }
.toggles-style2 .panel-title { background-color:#000; color: #fff; }
.toggles-style2 .panel-heading i { font-size:18px; margin: 0; color:#fff; padding-top:5px; }
.toggles-style3 { border:1px solid rgba(0, 0, 0, .15); border-top:none; }
.toggles-style3 .panel { border: none; border-top:1px solid rgba(0, 0, 0, .15); }
.toggles-style3 .panel-title { border: none; padding:20px 25px; font-size: 14px; position: relative; }
.toggles-style3 .panel-title span { position: absolute; right: 25px; top: 20px; }
.toggles-style3 .panel:first-child { border-bottom:none; }
.toggles-style3 .panel-heading { padding: 0; }
.toggles-style3 .panel-body { padding: 0 60px 25px 25px; background-color:#fff; }
.toggles-style3 .active-accordion h4 { font-weight: 600; }