Tips on altering CSS attributes within Magnific Popup

I am currently utilizing the Magnific Popup plugin in my project. The code snippet I have implemented is as shown below: 

        $(".event").magnificPopup({

            items: {

                src: ".hidden-div",
                type: "inline"
            },
            closeBtnInside: true
        });

The challenge I am facing is that the ".hidden-div" section, which I intend to display as a popup, has its CSS display property set to none for initial hiding. However, I wish for it to become visible when the script above is executed and return to being hidden when the popup is closed. Is there a method to dynamically toggle its display property from 'none' to 'block' upon opening the popup and back to 'none' upon closure?

jquerycssjquery-pluginspopupmagnific-popup

Answer №1

It is recommended to include the mfp-hide CSS class on elements that need to be hidden as per the design. Magnific Popup will handle toggling this class automatically during open and close operations. For more information, please visit:

Answer №2

Currently, this is how it's functioning. I found the API details here

$(".event").magnificPopup({

            callbacks: {
                open: function(){

                    $(".hidden-div").css("display", "block");
                },
                close: function(){

                    $(".hidden-div").css("display", "none");
                }
            },

            items: {

                src: ".hidden-div",
                type: "inline"
            },
            closeBtnInside: true
        });

Hopefully, others will find this information useful too! On a side note, really impressed with this plugin!

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

`Positioning of inline-block elements`

I am encountering an issue with the display CSS attributes set for three tags: a - inline-block img - block span - inline <a id="first"> <img/> <span> A first line of text B second line of text </span> </a> <a id="secon ...

htmlcss

Redirecting to new page after submitting form using Ajax

I'm having some trouble with my HTML form submission using JQuery and AJAX. After successfully submitting the form, I want to display a modal and then redirect to another page based on certain conditions. I've written the logic in my JS file wh ...

javascriptphpjqueryajaxforms

swapping out an input parameter

Looking for a more efficient way to replace a string in a textarea without causing issues with the script due to "&" characters? function doRequest(){ var str = $('textarea#tr').val(); $.ajax({ type: "POST", url: "index.php?sd=t", d ...

jquery

Simple JavaScript numeric input field

Hey there, I'm a beginner learning JavaScript. I'm currently working on creating a program that adds numbers input through text fields. If you want to check out the HTML code, visit this link on JS Fiddle: http://jsfiddle.net/fCXMt/ My questio ...

javascripthtmlcssmathaddition

The AJAX button toggle feature functions correctly, albeit only for one use before requiring a page

I've integrated a button on my website that allows users to mark a post as their favorite or unfavorite it. Clicking the button should switch between these two states by either adding or removing the post ID from a user's repeater field. The func ...

phpjqueryajaxwordpress

Obtaining documents through Mojolicious

Just a quick inquiry - I have successfully generated a .doc file using my mojolicious app with the help of the CPAN module MsOffice::Word::HTML::Writer. Now, the challenge I'm facing is figuring out how to make the browser initiate the download proces ...

javascriptjqueryajax

Locate Checkbox by its Attribute Name and Value

On my webpage, there are multiple groups of checkboxes. In one particular group, I have added a custom "documentcategory" attribute to each checkbox. My goal is to identify all the checkboxes on the page that have the "documentcategory" attribute with a va ...

javascriptjqueryhtml

"Encountering a 404 error while using Struts ajax

config.xml file <package name="admin" extends="struts-default" namespace="/admin"> <!-- Implement Login Functionality --> <interceptors> <interceptor class="AdminLoginController" name="loginStack"></interceptor> <intercep ...

javajqueryajaxjspstruts2

"Delve into the art of utilizing negative space between elements with

Looking to implement hover detection between rows in a grid container, rather than on individual items. The number of items in the container and per row may vary. https://i.sstatic.net/yBgKI.png It's important to note that the item count in the cont ...

javascriptjqueryhtmlcsshover

The URL for Ajax is not defined

I am currently working on a function that involves fetching an XML file and making some edits to it. This is new territory for me, so I had to do some research on the best approach to accomplish this task. After some consideration, I decided to use AJAX. H ...

javascriptjqueryajax

Eliminate all blank spaces at the top and bottom of Span by squishing it

Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...

javascriptjquerycss

Using spin.js instead of an animated gif provides a sleek and modern alternative for adding loading

Seeking guidance as a newcomer to JQuery. A form "processing" div should appear after form submission. Currently, using a basic div with an animated gif for visual feedback: <div id="loading">Please wait, your news is being submitted... <img src= ...

javascriptjquery

Why is it that styling <div> and <img> with a URL doesn't seem to work, even when applying the same styles?

In the example I have, I apply the same styling to an image and a div. Interestingly, the styling on the div makes the image look significantly better, while on the image itself it appears distorted. What could be causing this discrepancy? Both elements a ...

javascriptcssmaterial-ui

Issue where CSS modal does not appear when clicked after being toggled

I've been working on a custom modal design that I want to expand to fill the entire width and height of the screen, similar to how a Bootstrap modal functions. The goal is to have a container act as a background with another inner div for content How ...

javascriptcssvue.js

Refresh sorting in jQuery DataTable

I have encountered a situation where I am trying to accomplish a task that is similar to the one described in this post. Currently, I have a functional jquery dataTable. My goal is to create a function that can reset the sorting to its default state befo ...

jquerysortingdatatable

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

cssfont-face

Tips for retrieving an element that has been dynamically added to the page in jQuery after it has loaded

Here is the code I used to dynamically add list items to an unordered list after the page has fully loaded: <ul id='hints'></ul> This jQuery script is responsible for adding a new list item to the ul element once the page has finis ...

jquery

The error message appears as "jQuery("body").undelegate is not defined"

I have a working form that suddenly throws an error when I add this code snippet. The error message states "jQuery("body").undelegate is not a function." <?php echo CHtml::dropDownList( 'country_ ...

phpjqueryajaxyii

Clicking the button does not properly redirect the page as intended by window.location.replace()

When I click the button, instead of redirecting the page, it just refreshes and stays on the same page. Any idea what may be causing this? I have attempted the following: window.location = "https://stackoverflow.com/"; Current jQuery code snippet: <sc ...

c#jqueryasp.netwebforms

The mobile menu toggle functionality is malfunctioning on actual mobile devices, however, it is operational when tested on various mobile sim

Recently, I noticed that on , the menu collapses into a hamburger icon for mobile. However, when tapping on it on my phone and other devices, nothing happens. Surprisingly, it works perfectly fine when clicking on it in mobile simulators within Google Chro ...

csswordpressmobilemenuhamburger-menu