天道酬勤,学无止境

关闭前的 Magnific Popup 动作(Magnific Popup action before close)

问题

我已经在我的解决方案中实现了 Magnific Popup,并且我正在使用 Bootbox 来获得用户的确认,即他想要关闭窗口而不保存更改等。

我连接了我的自定义函数以关闭回调,但它没有按预期工作。

$('#divThumbnails').magnificPopup({
            delegate: 'a',
            type: 'inline',
            midClick: true,
            callbacks: {
                close: function () {
                    var confirm = bootbox.confirm('Are you sure?', function(result) {
                    });

                    if (confirm)
                        return true;
                    else
                        return false;

                }
            }
        });

这只是一个快速示例,而不是生产代码。 if-else 语句在那里,因为否则 Bootbox 对话框无法显示(通常不需要检查返回的值,因为它作为参数传递,在本例中称为 result )。

问题是,在我单击关闭按钮后,我的图像(即弹出窗口的内容)消失了。 我想有机会取消关闭操作并实现我需要一个在关闭弹出窗口之前触发的事件。

这可以通过 Magnific Popup 实现吗?

回答1
  // this part overrides "close" method in MagnificPopup object
  $.magnificPopup.instance.close = function () {

      if (!confirm("Are you sure?")) {
          return;
      }

       // "proto" variable holds MagnificPopup class prototype
       // The above change that we did to instance is not applied to the prototype, 
       // which allows us to call parent method:
       $.magnificPopup.proto.close.call(this);
  }; 

http://codepen.io/dimsemenov/pen/edCgo

回答2

此代码仅覆盖当前打开的弹出窗口! 如果您在关闭后打开相同的弹出窗口,此回调将消失!

$.magnificPopup.instance.st.callbacks.close=function(){ 

  // your code here

  // this actually close popup
  $.magnificPopup.proto.close.call(this);

};

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Magnific Popup action before close
    I have implemented Magnific Popup in my solutions and I am using Bootbox to get confirmation from the user that he wants to close the window without saving changes, etc. I hooked up my custom function to close callback but it doesn't work as expected. $('#divThumbnails').magnificPopup({ delegate: 'a', type: 'inline', midClick: true, callbacks: { close: function () { var confirm = bootbox.confirm('Are you sure?', function(result) { }); if (confirm) return true; else return false; } } }); This is just a fast sample, not production code. The if-else statement is there because otherwise Bootbox
  • magnific-popup,如何在弹出窗口打开时播放音频文件并在关闭时停止播放(magnific-popup, how to play an audio file when popup open and stop playing when closing it)
    问题 我正在使用 magnific-popup 来显示图片...是否可以在弹出窗口打开时开始播放 au 音频文件并在关闭窗口时停止播放? <a href="images/capoeira.jpg" class="fh5co-project-item image-popup to-animate"> <img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive"> <div class="fh5co-text"> <h1>ANIMA'SON</h1> <span>Participants: minimum 10, maximum: 20</span> </div> </a> 回答1 我通过在每个图像弹出链接中添加一个音频标签来解决它 <a href="images/capoeira.jpg" data-sound="berimbau" class="fh5co-project-item image-popup to-animate"> <img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive"> <div class="fh5co-text"> <h1>ANIMA'SON</h1> <h2>60€ /
  • 如果单击内容,为什么 magnific 弹出 ajax 框会关闭(why magnific popup ajax box closes if clicked on content)
    问题 请请请帮帮我.. 我一直在尝试让 ajax 弹出框显示登录表单。 似乎表单出现了,但是只要我点击表单或ajax正文中的任何地方,它就会消失。 下面是代码 $(document).ready(function() { $('.ajax-popup-link').magnificPopup({ type: 'ajax', alignTop: false, closeOnContentClick: false, overflowY: 'scroll' }); }); <a class=".ajax-popup-link" href="result.php">try me</a><br> 下面是我希望在 ajax 框中加载的 php。 这不是完整的 Email:<div class="field_container">Password:</label> <input type='password' name='cust_password' id='password' maxlength="12" style="width: 250px; height: 30px"; /></div> <input type='submit' name='Submit' value='Login' /> 回答1 这是旧线程,但对于所有未来的读者:要解决此问题,html 中必须只有一个根元素来自
  • Magnific-popup 无法从 Google Maps infoBox 内的按钮打开(Magnific-popup fails to open from button inside Google Maps infoBox)
    问题 我有一个信息框,当点击谷歌地图标记时会打开。 在 infoBox 内有一个按钮“#open-popup”,当点击它时应该打开一个 magnificPopup 模式窗口,但没有任何反应。 作为测试,我在包含谷歌地图的 div 之外放置了相同的按钮,这会打开模态窗口,但仅在第二次点击时! 到底是怎么回事? 我已经尝试了很多天,但都有最严重的副作用。 任何帮助都感激不尽。 infoBox 内按钮的 HTML: <div style=...> <centre> <button id="open-popup">Open popup</button> <div id="my-popup" class="mfp-hide white-popup">Inline popup</div> </center> </div> 谷歌地图 div 外按钮的 HTML: <button id="open-popup">Open popup</button> <div id="my-popup" class="mfp-hide white-popup">Inline popup</div> JS: myapp.triggerClick = function (){ google.maps.event.trigger(gmarkers[id],"click") }; var infoboxOptions =
  • 如何在 magnific popup plugin 中的 popup 中打开 popup(how to open popup within popup in magnific popup plugin)
    问题 谁能告诉我如何使用 magnific-popup jquery 插件(使用 ajax)在弹出窗口中打开弹出窗口。 $('.ajax-popup-link').magnificPopup({ type: 'ajax' }); <a href="path-to-file.html" class="ajax-popup-link"> Link 1 </a> 在“文件路径.html”上 <a href="path-to-other-file.html" class="ajax-popup-link"> next popup </a> 谢谢 回答1 你不能同时打开两个窗口。 但是第二次调用时弹出的内容被替换,这里是例子 - http://codepen.io/dimsemenov/pen/hwIng 回答2 我知道这是一个旧线程,但对于仍然感兴趣的任何人,这对我有用: $(document).on('click', '.sAjax', function(e){ $.magnificPopup.close(); // Close existing popup // Open new popup $.magnificPopup.open({ items: { src: 'new-page.html', type: 'ajax' } }); e.preventDefault(); })
  • 如何在 magnific popup 中嵌入 youtube 视频?(How to embed youtube video in magnific popup?)
    问题 我有 magnific popup plugin.but 它没有在 popup 上显示视频 如何在 magnific popup 中嵌入 youtube 视频? 回答1 检查以下链接以获取文档: 文件 $(document).ready(function() { $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false }); }); <a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a> 希望这可以帮助。 回答2 默认情况下,Magnific Popup 对每个服务仅支持一种类型的 URL,因此我将其扩展为支持几乎所有 YouTube/Vimeo 视频 URL 类型: http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type $('.my
  • jQuery magnific-popup:打开 2 个具有不同宽度/高度的弹出 iframe(jQuery magnific-popup : open 2 popup iframe with differents width/height)
    问题 ) 我的代码: <a href="subpage1.html" class="pop">OPEN POP1</a> <a href="subpage2.html" class="pop">OPEN POP2</a> 我的JS: $('.pop').magnificPopup({ type:'iframe', midClick: true} ); 我希望 POP1 以 500px 200px 打开,POP2 以 400px 400px 打开。 为 POP1 和 POP2 设置不同宽度/高度的方法是什么? 我必须在 HREF 中使用 CLASS 吗? 或者它是 JS 中的代码,通过创建 $(.pop1) 和 $(.pop2) ? 我在“.mfp-iframe-holder .mfp-content”类中使用了宽度/高度,但设置更改了 pop1 和 pop2。 任何帮助都会很棒。 ;-) 回答1 您没有在问题中指定它,但我假设您使用的是 Magnific Popup 插件。 为方便日后参考,请指明,以便其他人更容易为您提供帮助。 我建议为每个类使用一个类(假设.pop1和.pop2用于 500x200 和 400x400 尺寸)。 由于类名与生成的弹出窗口 HTML 没有直接关系(在生成的弹出窗口中不会引用类.pop1和.pop2 ),我们不能隔离它们的弹出窗口,并且不能仅通过
  • Magnific Popup:来自跨度的源标题(Magnific Popup: source title from span)
    问题 我想从锚标签内的隐藏标题字段中获取我的 Magnific 图像的标题 - 而不是从标题中获取。 这是因为我的标题包含标记。 HTML <a href="img/zoom.jpg"> <img src="img/small.jpg" alt=""> <span class="hide">This is a caption with <a href="#">a link</a> in it</span> </a> JS // initialise the magnific lightbox $('.js-lightbox').each(function() { $(this).magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] // Will preload 0 - before current, and 1 after the current image }, image: { titleSrc: function(item) { return item.el.text; }, tError: '<a href="%url%"
  • 将单击元素的数据属性值传递给 ajax 设置(Pass data-attribute value of clicked element to ajax settings)
    问题 对于 Magnific Popup 的实现,我需要将帖子 ID 传递给 ajax 设置。 post id 存储在 Magnific Popup 绑定到的元素的 data 属性中。 我希望这个工作: html元素: <a data-id="412">Clicke me</a> Javascript: $('.element a').magnificPopup({ type: 'ajax', ajax: { settings: { url: php_array.admin_ajax, type: 'POST', data: ({ action:'theme_post_example', id: postId }) } } }); 其中 postId 是从 data 属性中读取的。 提前致谢。 回答1 $('.element a').magnificPopup({ callbacks: { elementParse: function(item){ postData = { action :'theme_post_example', id : $(item.el[0]).attr('data-id') } var mp = $.magnificPopup.instance; mp.st.ajax.settings.data = postData; } }, type: 'ajax'
  • magnific-popup, how to play an audio file when popup open and stop playing when closing it
    I am using magnific-popup to display pictures ... Is it possible to start playing au audio file when the popup window open and stop it when closing the window ? <a href="images/capoeira.jpg" class="fh5co-project-item image-popup to-animate"> <img src="images/berimbau.jpg" alt="Animason groupes" class="img-responsive"> <div class="fh5co-text"> <h1>ANIMA'SON</h1> <span>Participants: minimum 10, maximum: 20</span> </div> </a>
  • why magnific popup ajax box closes if clicked on content
    Please Please Please help me.. I have been trying to get the magnific popup ajax box to show login form. It seems that form appears but as soon as I click anywhere in form or ajax body, it disappears. below is the code $(document).ready(function() { $('.ajax-popup-link').magnificPopup({ type: 'ajax', alignTop: false, closeOnContentClick: false, overflowY: 'scroll' }); }); <a class=".ajax-popup-link" href="result.php">try me</a><br> Below is the php that I look to load in ajax box. This is not the complete one Email:<div class="field_container">Password:</label> <input type='password' name=
  • 分页的数据表第 2 页未调用 Magnific Popup(DataTables page 2 of pagination not calling Magnific Popup)
    问题 所以我有这个启用分页的 DataTable,我编码了一种方式,以便用户可以编辑表格的行,当用户调用它在 Magnific Popup 中打开的编辑页面时,它在第 1 页上运行良好,从第 2 页开始DataTable 和前面它停止调用 Magnific Popup,我就是不知道为什么...... 带有在 Magnific Popup 中打开的表单的 edit.php 有这个 div: <div id="ajax-content" class="example-popup"> 以及以下css: position: relative; background: #FFF; padding: 10px; width: auto; max-width: 750px; margin: 20px auto; color: #999; font-weight: bold; 在我的索引中,我有这个功能: $('.popup-ajax').magnificPopup({ type: 'ajax', showCloseBtn: 'true', modal: 'true', }); 以及调用该函数的链接: echo '<td><a href="http://localhost/teste/include/edit.php?id=' . $row['id'] . '" class="popup-ajax
  • Magnific Popup - 弹出窗口在点击时消失(Magnific Popup - Popup disappearing on click)
    问题 我最近刚刚实现了“Magnific Popup”并且弹出窗口很好,但是当我单击一个输入框时,整个弹出窗口消失回到父页面。 在插件网站上显示的示例中,整个对话框都是可单击的,直到您在该框外单击。 我希望它只是我错过的一些非常简单的东西,但它仍然在我脑海中浮现。 我真的很感激我能得到的任何帮助! 谢谢 :) 回答1 如果您使用“ajax”内容类型,则需要确保只有一个根节点。 http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type 例如,这是 ajax 文件的正确内容: <div> html content <script src="something.js"></script> </div> 不正确: <script src="something.js"></script> <div> html content </div> 不正确: <div> html content </div> <div>Another content</div> 还要确保closeOnContentClick设置为false http://dimsemenov.com/plugins/magnific-popup/documentation.html#closeoncontentclick 如果由于某种原因
  • Wordpress 发布正文图像的 Magnific Popup(Magnific Popup for Wordpress post body images)
    问题 我正在研究 WordPress 主题,我想知道是否有一种方法可以在 Magnific Popup 中打开编辑器插入到帖子正文中的图像。 因此,当单击前端时,我通过 TinyMCE 编辑器在帖子中插入的任何图像都将在 Magnific Popup 上打开。 回答1 这个问题有几种不同的方法。 我在下面概述了一些。 选项1 过滤内容并应用可通过 Magnific Popup 定位的 HTML 属性。 我们可以从这篇文章中得到提示并利用 the_content 钩子。 “the_content”过滤器用于在从数据库中检索到帖子后和打印到屏幕之前过滤帖子的内容。 函数.php 将以下内容添加到functions.php 。 function prefix_content_gallery( $content ) { global $post; $pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>'; $content = preg_replace( $pattern, $replacement, $content )
  • 华丽的弹出窗口:在回调中获取当前元素(Magnific popup: Get current element in callback)
    问题 在 Magnific Popup 中,我想在被点击的链接中获取一个属性,并在回调函数中使用它(使用回调:打开)以在 DOM 中进行一些更改。 我怎样才能做到这一点? 例如,在下面的代码中,它应该返回 'it works' 到控制台。 相反,它打印“不起作用”。 请帮忙!! <a href="#test-popup" class="open-popup-link" myatt="hello">Show inline popup</a> <script src="jquery.magnetic.custom.js"></script> <script> $(document).ready(function() { $('.open-popup-link').magnificPopup({ type:'inline', midClick: true, callbacks: { open: function() { if ($(this).attr('myatt')=="hello") { // do something console.log("it works"); } else { console.log("doesnt work"); } }, close: function() { } } }); }); </script> <div id="test-popup"
  • 在 Magnific-Popup 模式中显示 PDF 文件(Display PDF file inside Magnific-Popup modal)
    问题 我的网站上有一个表格,用户需要填写该表格才能生成 PDF 文件。 如果表单中有错误,服务器将使用带有错误列表的 json 对象进行响应,否则将使用 PDF 文件(作为字符串)进行响应。 我正在尝试在 Magnific-Popup (https://www.npmjs.com/package/magnific-popup) 中显示该 PDF 文件。 $('.preview-button').on('click', function (e) { event.preventDefault(); var theLink = $(this); var formElement = theLink.closest("form"); $.ajax({ url: theLink.attr('href'), method: 'GET', data: formElement.serialize(), success: function (response, textStatus, jqXHR) { var contentType = jqXHR.getResponseHeader("content-type") || ""; if(contentType.indexOf('pdf') > -1){ // How can I tell to magnific popup to display the
  • Magnific popup: Get current element in callback
    In Magnific Popup, I want to get an attribute in the link that is clicked and use it in a callback function (using callbacks: open) to make some changes in the DOM. How can I do this? For example, in the code below, it should return 'it works' to console. Instead it prints 'doesnt work'. Please help!! <a href="#test-popup" class="open-popup-link" myatt="hello">Show inline popup</a> <script src="jquery.magnetic.custom.js"></script> <script> $(document).ready(function() { $('.open-popup-link').magnificPopup({ type:'inline', midClick: true, callbacks: { open: function() { if ($(this).attr('myatt'
  • Magnific Popup - 打开 You Tube 视频时出错(Magnific Popup - Error when opening a you tube video)
    问题 无法在放大的弹出窗口中播放视频。 当我使用class=iframe ,页面将重定向到 youtube 并播放视频。 但是当我使用class=popup-youtube ,会显示弹出窗口,但我收到以下错误消息: 找不到此网页 No webpage was found for the web address: file://www.youtube.com/embed/AcnImfXjBHo?autoplay=1 Error 6 (net::ERR_FILE_NOT_FOUND): The file or directory could not be found. 这是 HTML 代码: <a class="popup-YouTube" href="HTTP://www.youtube.com/watch?v=AcnImfXjBHo"> Trial Master File Video</a> 这是JS: $(document).ready(function() { $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false
  • 如何在页面加载时加载 magnific popup modal(how to load magnific popup modal on page load)
    问题 我正在尝试在页面加载时加载我的 magnific popup modal,但是我不太明白文档中的语法。 如何在页面加载时调用模态? 我的 HTML: <div id="test-modal" class"white-popup-block mfp-hide"> <h1>Modal Test</h1> <p> Test Some text. </p> <p> <a class="popup-modal-dismiss">Dismiss</a> </p> </div> 我的JS: $(window).load(function(){ ???? What code should I place??? }); 我已经预加载了脚本和 css 文件,我在 JS 中输入什么才能让它在加载时加载弹出窗口? 回答1 试试这个: $.magnificPopup.open({ items: { src: '<div id="test-modal" class="white-popup"><h1>Modal Test</h1><p>Test Some text.</p><p><a class="popup-modal-dismiss">Dismiss</a></p></div>', type:'inline' }, modal: true }); 还有小提琴... 回答2 $
  • 大型弹出窗口中iframe /视频的标题(Title for iframe/video in magnific popup)
    问题 我需要显示视频弹出窗口的标题/标题。 在图片类型中,有此选项,但视频/ iframe没有。 在文档(http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type)中,我找到了模板标记的示例,但我不知道如何使标题可见。 您能帮我设置iframe标记,以便从链接之类的弹出窗口中显示标题吗? <a class="popup" title="This is caption" href="http://vimeo.com/41128754"></a> JS代码 $('a.popup').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: true, titleSrc: 'title' }); 谢谢你。 回答1 有点晚了,但对寻求答案的其他人可能会有所帮助。 “ titleSrc”属性仅适用于以下类型:图片,不适用于iframe。 Magnific Popup的开发人员在此处有一个如何向iframe弹出窗口添加标题的示例:http://codepen.io/dimsemenov/pen/zjtbr