Stop Magnificent Popup Iframe when Clicking on a Link

I am currently using a Magnific Popup iframe to display a form (created with Machforms).

<div align="center">
  <a class="popup-link" href="...machform/view.php?id=3717">
     <img src="images/image.png">
  </a>
</div>

Once the form is submitted, it redirects to another iframe popup containing a link for downloading a PDF, which opens in a new tab.

Thank you. Your submission has been successful! <br/>
<a href=".../downloads/TEST%20DOWNLOAD%20PAGE.pdf" target="_blank">Download file here.
</a>

When clicking on the 'download file here.' link, I want the popup to automatically close. However, I have tried methods like closeOnContentClick and overriding the close function without success.

If anyone knows how to achieve this, I would greatly appreciate your help!

javascriptiframepopupmagnific-popup

Answer №1

To manually close $.magnificPopup, you must call it from the parent window when it's within an iframe.

On a previous project, I used the following approach:

$('#closeBtn').click(function(e) {
   e.preventDefault();
   if (self !== top) {
      parent.$.magnificPopup.close();
   }
});

Answer №2

To close the popup, simply add the class .close-my-popup to your link and include this code in your JavaScript file:

$(document).ready(function() {      
 $('.close-my-popup').click(function() {
    $.magnificPopup.close();
 });
});

Alternatively, you can achieve the same result by using this method:

<a href=".../downloads/example.pdf" target="_blank" onclick="$.magnificPopup.close();">Download the file here.</a>

Answer №3

Incorporate a JavaScript click handler onto the specified link, followed by executing window.close() within the callback function.

Example (using jQuery):

$('[specific link selector]').click(function() {
    window.close();
});

Ensure this code is implemented in the iFrame's script to avoid inadvertently closing your primary window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Puppeteer compatibility issues when using TypeScript and esModuleInterop

When attempting to use puppeteer with TypeScript and setting esModuleInterop=true in tsconfig.json, an error occurs stating puppeteer.launch is not a function If I try to import puppeteer using import * as puppeteer from "puppeteer" My questi ...

javascripttypescriptpuppeteertsc

I'm looking to provide the average rating of a restaurant along with the name of the owner

Currently, I am utilizing knex to craft queries for my express server. Within my database, I have two tables structured as follows: My objective is to establish a join between the two tables using the "owner_id" foreign key. Subsequently, I aim to retriev ...

javascriptexpressknex.js

JavaScript code to always keep the element on top of the page: "Make

I have developed a straightforward chrome extension tool that displays a small text message (a div with z-index 999999) on the webpage that the user is currently viewing. However, I am facing a problem where the div sometimes gets hidden beneath the existi ...

javascripthtmlcss

What is the best method for converting an ASCII JSON 3D model file into binary format?

As I delved into various webGL examples, particularly those based on Three.js, I came across a fascinating method of loading large models using a combination of ASCII and binary JSON. This technique caught my attention due to the significant reduction in f ...

javascriptjson3dthree.js

Issues with Angular Reactive Forms Validation behaving strangely

Working on the login feature for my products-page using Angular 7 has presented some unexpected behavior. I want to show specific validation messages for different errors, such as displaying " must be a valid email " if the input is not a valid email addre ...

javascriptangulartypescriptangular-reactive-formsangular-validation

Faster method for submitting extensive forms via AJAX

Is there a way to make this code shorter, especially for the sections with ... 20 items? <input type='text' id='inputname' maxlength='50' placeholder='Name' required> <input type='text' id='i ...

javascriptphpjqueryajaxforms

Creating intricate HTML components using jQuery/Javascript

My current challenge involves receiving data from JSON and dynamically displaying it on a web page within complex HTML structures, such as tables with lists. Every time new JSON data is received, I need my HTML elements to be dynamically regenerated. For ...

javascriptjqueryhtml

What is the process for assigning a function and its arguments as a callback in programming?

Here is a code snippet for your consideration: $scope.delete=function(){ foo('x',3); }; How can we improve the clarity of this code snippet when the callback function contains only one line that calls another function? It's important ...

javascript

The JQuery command to set the display property to "block" is not functioning as expected

When trying to toggle the visibility of my TextBox based on a selected value in a RadiobuttonList, I initially wrote the following code: $("#<%= rbtnIsPFEnabled.ClientID %>").click(function () { pfno = $("#<%= txtPFNo.ClientID %&g ...

javascriptjquerycssasp.net

Guide on utilizing Vue to trigger an API call when the input box loses focus

I am currently facing challenges while trying to learn vue, and I am not sure how to proceed. I would greatly appreciate any assistance! To begin with, I want to acknowledge that my English may not be perfect, but I will do my best to explain my issue tho ...

javascriptvue.js

Require a more efficient strategy for iterating through lines of input

One of the challenges I'm facing with my form is that it contains 5 input lines. I need to keep any blank lines that are sandwiched between two filled lines, while removing all others. For instance, if the first line is blank, the second line contains ...

javascriptjqueryjquery-ui

Conceal a div and label after a delay of 5 seconds with a JavaScript/jQuery function in C#

Here is a sample div: <div class="alert alert-success alert-dismissable" runat="server" visible="false" id="lblmsgid"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ...

javascriptc#jquery

Updating the index page with AJAX in Rails 4: Step-by-step guide

It's surprising that I haven't found answers to my specific questions despite searching extensively. I have an Expenses page where I want to display all expenses for a given month in a table. Currently, I achieve this by adding month and year par ...

javascriptjqueryruby-on-railsajaxjson

JavaScript code for AES encryption that is compatible with PHP's mcrypt module

Challenge I am faced with the task of encrypting data using Javascript and decrypting it in PHP. I have decided to use Mcrypt in PHP with the AES encryption method, but I am struggling to find a suitable decryption algorithm in Javascript that is compatib ...

phpjavascriptencryptionaesmcrypt

What is the best method to retrieve checked checkbox values and the selected dropdown value using AngularJS?

My code is set up to capture checked checkbox values and selected dropdown value when the submit button is pressed. It successfully retrieves the checked checkbox values, but I'm having trouble getting the selected offer from the dropdown. For example ...

javascriptjqueryangularjs

Looking for guidance on how to fill the "via" table in Sequelize?

I'm currently trying to understand the N:M relationship in sequelize, specifically regarding populating the "through" table. Here are the models I am working with: Product / Category 'use strict'; module.exports = (sequelize, DataTypes) = ...

javascriptnode.jspostgresqlsequelize.js

Using ng-click to manipulate variables within a list

In my ionic/angular/phonegap app, I have a list of items and I'm attempting to use an action sheet to pass in the variables. However, I am having trouble accessing the variable on the same line as the ng-repeater. Here is the markup: <ion-view vi ...

javascriptangularjsionic-framework

Manipulating float values in jQuery is similar to formatting numbers in PHP with the number_format() function

I am looking for a way to output floating numbers in JavaScript that functions exactly like the number_format function in PHP. Sample Javascript Code Math.round(totalCredit).toFixed(2) Sample PHP Code echo number_format(22212 , 2); The code above re ...

javascriptjquery

Tips for utilizing an npm package in conjunction with Hugo

I created a basic hugo site with the following command: hugo new site quickstart Within the layouts/_default/baseof.html file, I have included a JavaScript file named script.js. Inside script.js, the code looks like this: import $ from 'jquery' ...

javascriptjquerynpmhugostatic-site

Prevent the <a> tag href attribute from functioning with jQuery

I came across this code snippet: <script type="text/javascript"> $(document).ready(function() { $("#thang").load("http://www.yahoo.com"); $(".SmoothLink").click( function() { $("#thang").fadeOut(); $("#thang").load( ...

javascriptjqueryajax