javascript - Magnific Popup - lightbox issue, plus mfp-hide seems to do nothing -

-

this first time using stackoverflow please patient me, heh.

i'm relative newbie when comes html, css , js, gotta use them work every , then. today i've applied magnific popup site i'm working on. i'm trying use "open fade-zoom animation" example, , modify fit needs of course. popup working, indeed, div popup box isn't hiding, despite having mfp-hide class. it's weird because dreamweaver preview hide it, chrome not (i'm on latest version of chrome windows, if helps.) also, lightbox magnific popup site displays behind every popup seen.

here's jsfiddle code. posting interface says need post code here here goes:

here's html:

<div>     <a class="popup-with-zoom-anim" href="#dialog">         <span>click here display dialog</span>     </a> </div>  <div id="dialog" class="zoom-anim-dialog mfp-hide">     <h1>dialog title</h1>     <br><br>     <p>dialog text</p> </div>

my js (located inside script block right before </body> tag)

$(document).ready(function() {     $('.popup-with-zoom-anim').magnificpopup({         type: 'inline',         fixedcontentpos: false,         fixedbgpos: true,         overflowy: 'auto',         closebtninside: true,         preloader: false,         midclick: true,         removaldelay: 300,         mainclass: 'my-mfp-zoom-in'     }); });

and in case, css (located inside style block right on script block js)

/* styles dialog window */ #dialog { background: white; padding: 20px 30px; text-align: left; max-width: 700px; position: relative; box-shadow: 1px 1px 10px 5px rgba(0,0,0,0.25); left: 50%; right: 50%; z-index: 999; top: 100px }  /** * fade-zoom animation */  /* start state */ .my-mfp-zoom-in .zoom-anim-dialog { display:block; opacity: 0;  -webkit-transition: 0.2s ease-in-out;  -moz-transition: 0.2s ease-in-out;  -o-transition: 0.2s ease-in-out;  transition: 0.2s ease-in-out;   -webkit-transform: scale(0.8);  -moz-transform: scale(0.8);  -ms-transform: scale(0.8);  -o-transform: scale(0.8);  transform: scale(0.8);  }  /* animate in */ .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { opacity: 1;  -webkit-transform: scale(1);  -moz-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);  }  /* animate out */ .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { -webkit-transform: scale(0.8);  -moz-transform: scale(0.8);  -ms-transform: scale(0.8);  -o-transform: scale(0.8);  transform: scale(0.8);   opacity: 0; }  /* dark overlay, start state */ .my-mfp-zoom-in.mfp-bg { opacity: 0; -webkit-transition: opacity 0.3s ease-out;  -moz-transition: opacity 0.3s ease-out;  -o-transition: opacity 0.3s ease-out;  transition: opacity 0.3s ease-out; } /* animate in */ .my-mfp-zoom-in.mfp-ready.mfp-bg { opacity: 0.8; } /* animate out */ .my-mfp-zoom-in.mfp-removing.mfp-bg { opacity: 0; }

that's i've got. i'm sorry if question's been answered already, have not been able find it. let me know if there's else can provide solve problem. , in advance reading. cheers.

i had similar issue mfp-hide class did nothing. caused not including magnific popup's css. check see if root cause too. can include following:

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.1/magnific-popup.min.css" rel="stylesheet">

Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more