单击手风琴时，弹出窗口不应关闭
我正在使用此框架实现登录弹出窗口，并且一直困扰着如何以可编程的方式打开和关闭某些指定的弹出窗口而没有相应链接的问题？ 您的文档很棒，但是很遗憾，我在这方面没有发现任何东西。
请您提供，单击手风琴时，Popup不应关闭，其他所有单击后都应关闭。
我正在使用此代码。
$('.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; }
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？