Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1117335

    Hi All,

    I have been searching everywhere for a solution to get the close ‘X’ button position:fixed.
    I have applied the css to ‘.mfp-close’ and on inspection (chrome) I can clearly see it has the fixed position, but it still scrolls on the frontend.
    I fixed positioned the arrows and those work fine.

    Any solution would be greatly appreciated. I have attached a private link as still in development.

    #1117476

    Still can’t get it to work. Does this happen to anyone else? Is it only not working for me?

    #1117692

    All sorted… I’ve managed a little hack to get it work like I want it to. So far it is the best solution I can find that won’t alter the plugin’s files. If anyone is interested, here is what I did…..

    Remember to use child-theme and you will need to be able to add your own jquery to the theme. Please check the forum for this.

    Anyways..

    1. Create a div just under the opening <body> tag in the header.

    <div id="close-image-modal" class="close-image-modal">×</div>

    2. Style the div/button as you wish in your child themes stylesheet, but remember to add the fixed positioning. (This is mine)

    .close-image-modal {
    	display: none; /* hide initially. important */
    	position:fixed;
    	top:50px;
    	right:20px;
    	height:50px;
    	width:50px;
    	text-align:center;
    	line-height: 50px;
    	font-size:30px;
    	background-color: #fff;
    	color:#000;
    	z-index:2000;
    	border-radius: 50%;
    	transform: all 0.5s ease-out;
    }
    .close-image-modal:hover {
    	background-color: #76787c;
    	color:#fff;
    }
    /* hide the close button the magnific poopup creates */
    button.mfp-close {
    	display:none !important;
    	opacity: 0 !important;
    	visibility:hidden !important;
    }

    3. Now add this jquery to your custom .js file.

    (function($) {
      $(document).ready(function() {
        $("#close-image-modal").hide(); // make sure that the close button is hidden on document load
        $(".avia_image").on("click", function() { // when image is clicked it needs to display the close button (if you ot using lightboxes everywhere, you will need play around with classes related.
          $("#close-image-modal").show();
        });
        $("#close-image-modal").on("click", function() { // when custom div/button is clicked, it will trigger the actual close button and hide itself again.
          $(".mfp-close").trigger("click");
          $("#close-image-modal").hide();
        });
      });
    })(jQuery);

    Make sure you clear all cache and all should be good to go. This is a quick solution for me, but if anyone has a more elegant way, please do post.
    Cheers.

    #1118044

    Hi,

    It looks awesome. Good job! And thank you for sharing.

    Have a nice day!

    Best regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.