Magnific - open popup with URL param

Developer
Jeff Pannone
Size
3,607 Kb
Views
22,264
  1. Magnific - open popup with URL param Previews
  2. Magnific - open popup with URL param HTML Codes
  3. Magnific - open popup with URL param CSS Codes
  4. Magnific - open popup with URL param JS Codes

How do I make an magnific - open popup with url param?

What is a magnific - open popup with url param? How do you make a magnific - open popup with url param? This script and codes were developed by Jeff Pannone on 12 August 2022, Friday.

Magnific - open popup with URL param Previews
IQ Test

Magnific - open popup with URL param - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Magnific - open popup with URL param</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="popup-with-move-anim btn" href="#medium-dialog">Open Popup</a>
<div id="medium-dialog" data-mfp-id="forgotpass" class="white-popup zoom-anim-dialog mfp-hide mfp-popup"> <h2>Forgot Password</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsa vero rerum, nam quo odit. Accusamus corporis quod, dolore illo alias ad aspernatur quo nulla dolores, quibusdam voluptate voluptas eius!</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.magnific-popup/1.0.0/jquery.magnific-popup.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Magnific - open popup with URL param - Script Codes CSS Codes

body { background: rgba(0, 0, 0, 0.1);
}
.btn { color: #fff; background: #232323; margin: 100px auto; display: block; width: 180px; padding: 15px; text-align: center; text-decoration: none; text-transform: uppercase; font-weight: 100; letter-spacing: 2px; transition: opacity .3s;
}
.btn:hover { opacity: .85;
}
/* text-based popup styling */
.white-popup { position: relative; background: #FFF; padding: 25px; width: auto; max-width: 400px; margin: 0 auto;
}
.mfp-with-fade { transition: opacity .5s ease;
}
.mfp-with-fade .mfp-content, .mfp-with-fade.mfp-bg { opacity: 0; transition: opacity .5s ease;
}
.mfp-with-fade.mfp-ready .mfp-content { opacity: 1;
}
.mfp-with-fade.mfp-ready.mfp-bg { opacity: 0.8;
}
.mfp-with-fade.mfp-removing.mfp-bg { opacity: 0;
}

Magnific - open popup with URL param - Script Codes JS Codes

/*------------------------------------
MAGNIFIC POPUP - load on click of button
-------------------------------------*/
//default load on click of button.
$(document).ready(function() { $('.popup-with-move-anim').magnificPopup({ type: 'inline', fixedContentPos: true, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 350, mainClass: 'mfp-with-fade white-bg' });
});
/*------------------------------------
MAGNIFIC POPUP
load on recognition of url paramater
-------------------------------------*/
//GET URL Parameters
//USAGE:
//http://www.example.com/index.php?id=1&image=awesome.jpg
//Calling getQueryVariable("id") - would return "1".
//Calling getQueryVariable("image") - would return "awesome.jpg"
function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false);
}
// if URL has "popup" parameter
// and its value is not empty
// then render appropriate popup on page load $(document).ready(function() { //set default state for popupParam popupParam = ''; //if popupParam exists, store its value for use later if(window.location.href.indexOf("popup") > -1) { popupParam = getQueryVariable("popup"); console.log(popupParam); }else{ console.log('no popup param'); } if(popupParam != ''){ } //if popupParam has a value, then we open the appropriate popup if(popupParam != ''){ $.magnificPopup.open({ items: { //find element with data attribute //referencing popupParam value src: '.mfp-popup[data-mfp-id="' + popupParam + '"]' }, type: 'inline', fixedContentPos: true, fixedBgPos: true, overflowY: 'auto', closeBtnInside: true, preloader: false, midClick: true, removalDelay: 350, mainClass: 'mfp-with-fade white-bg', callbacks: { open: function() { //can do additional actions here, if needed. } } }); } });
Magnific - open popup with URL param - Script Codes
Magnific - open popup with URL param - Script Codes
Home Page Home
Developer Jeff Pannone
Username jeffpannone
Uploaded August 12, 2022
Rating 3
Size 3,607 Kb
Views 22,264
Do you need developer help for Magnific - open popup with URL param?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Pannone (jeffpannone) Script Codes
Name
DWSG Templates
Geolocation API
JQuery Viewport Size
Slider and Product Functionality
Hompage Grid
Cart Design
Scroll Depth Example
JQuery Division
HTML2Canvas Preview
Photoswipe Drug Facts
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!