CLose Button doesn't appear on magnific-popup - javascript

This should be simple .... However....
I've tried almost everything to get the Close (X) Button to appear on the magnific popup. But it doesn't happen. There's no escape from the popup page except for the Back option. Here's what I've got:
.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}
and
<div class="popup-modal">
<img src="img/paintings/acrylic-trulkhor-1.png">
</div>
<div id="test-modal" class="mfp-hide white-popup">
<p><button class="closePopup">Close</button></p>
</div>
<script type="text/javascript">
$('.popup-modal').magnificPopup({
type: 'inline',
modal: false,
});
$(document).on('click', '.closePopup', function (e)
{
e.preventDefault();
$.magnificPopup.close();
});
</script>
</div>
Any ideas?
Thanks.

Here is a working example: https://jsfiddle.net/0rd5dc3v/2/
There are a few things I changed:
// Change the html link to the popup id, not the image url
<div class="popup-modal">
<a class="popup-modal-link" href="#test-modal"><img src="img/paintings/acrylic-trulkhor-1.png"></a>
</div>
// Call magnificPopup on the <a> element, not the outer div
$('.popup-modal-link').magnificPopup({
type: 'inline',
// Hide the builtin close button so we can use a custom close button
showCloseBtn: false
});

The button is white in color by default. To make it visible set its CSS property to black or any color that is visible on a white background.
.mfp-close {
color : black;
}

A simple workaround is to include the closeMarkup property in the object you init Magnific Popup with, and adding in a custom class to that markup.
Then, add that named custom class from your markup to your CSS with display set to something other than 'none', and marked !important.
Within the Magnific Popus JS:
closeMarkup:"<button title='%title%' type='button' class='mfp-close myDisplayOverride'>×</button>"
CSS:
.myDisplayOverride{
display:block !important
}

5 years late to the party!
I had the same issue as you did: when inline was set to true, the close button was not there.
You need to add the closeBtnInside: true configuration option in order to make the button visible.
So in your case:
$('.popup-modal').magnificPopup({
type: 'inline',
modal: false,
closeBtnInside: true
});
Just keep in mind that if you have custom markup for you close button, you need to add a tiny bit of CSS magic to make it work on click.
My custom button markup looks like this:
closeMarkup: '<button type="button" class="mfp-close"><i class="far fa-times"></i></button>'
And when you click on the <i class="far"> element, nothing happens.
So you need to add
.mfp-close i {
pointer-events: none;
}
because magnificPopup has the click handler bound to the button element but not its children...

Related

unable to scroll down inside jQuery modal popup when access from my iphone (from a touch screen)

I have the following jQuery code to show a modal popup inside my asp.net MVC core web application:
$(document).ready(function () {
$(function () {
$.ajaxSetup({ cache: false });
$(document).on('click', 'button[data-modal]', function (e) {
$('#myModalContent').css({ "margin": "5px", "max-height": screen.height * .82, "max-width": screen.height * .82, "overflow-y": "auto" }).load($(this).attr("data-url"), function () {
$('#myModal').modal({
height: 1000,
width: 2200,
resizable: true,
keyboard: true,
backdrop: 'static',
draggable: true
}, 'show');
});
return false;
});
});
});
and the following HTML:
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
now the modal popup will render a partial view which will show a horizontal tool bar when accessed from normal windows machine (as the partial view has a lot of horizontal content), but if I access the modal popup inside my iPhone then I can not scroll down inside the modal popup. If I try to scroll down, I will be actually scrolling the main page and not the modal popup. Any advice on how I can fix this?
You can configure this in such a way that when your modal opens, add a class to your <body> element to prevent it from scrolling.
On your js, include this where you toggle your modal:
$(document.body).addClass('modal-open'); Do this when your modal opens
$(document.body).removeClass('modal-open'); Do this when your modal closes
Then in your css, you can apply some style to that specific class:
body.modal-open {
overflow: hidden !important;
position: fixed !important;
}
If you're using bootstrap, you might consider using checking this out. I am not sure if this is still the case, I'm not familiar with bootstrap.
Maybe this answer can help you. It sugests the following CSS for a similar problem:
body.modal-open {
position: fixed;
overflow: hidden;
left:0;
right:0;
}
.modal{
-webkit-overflow-scrolling: auto;
}

Can't hide other elements while clicking on another

I'm trying to make a toggle which works, but every element I click on creates a stack of these showed elements. Instead I'm trying to hide everything and display only element that I clicked on. Now I can only hide it when I click on the same element twice, which is not what I want. I want to click on one and hide previous ones that were showing.
.totalpoll-choice-image-2 is a bunch of images that always has to be shown. They are what the user clicks on to display hidden description under each image. That description shows up when I click on .totalpoll-choice-image-2. There are 5 images with that class. The next image I click on, I want to hide the previous description box.
My code:
jQuery(document).ready(function() {
var element = document.getElementsByClassName("totalpoll-choice-image-2");
var elements = Array.prototype.slice.call(Array.from( element ) );
console.log(elements);
jQuery(element).each(function(item) {
jQuery(this).unbind('click').click(function(e) {
e.stopPropagation();
var id = jQuery(this).attr("data-id");
console.log(this);
//jQuery("#" + id).css({"display": 'block !important'});
//document.getElementById(id).style.setProperty( 'display', 'block', 'important' );
var descriptionContainer = document.getElementById(id);
var thiss = jQuery(this);
console.log(thiss);
console.log(jQuery(descriptionContainer).not(thiss).hide());
jQuery(descriptionContainer).toggleClass("show");
});
})
})
You can attach event handlers to a group of DOM elements at once with jQuery. So in this case, mixing vanilla JS with jQuery isn't doing you any favors - though it is possible.
I threw together this little example of what it sounds like you're going for.
The script itself is very simple (shown below). The classes and IDs are different, but the idea should be the same:
// Assign click handlers to all items at once
$('.img').click(function(e){
// Turn off all the texts
$('.stuff').hide();
// Show the one you want
$('#' + $(e.target).data('id')).show();
})
https://codepen.io/meltingchocolate/pen/NyzKMp
You may also note that I extracted the ID from the data-id attribute using the .data() method, and attached the event listener with the .click() method. This is the typical way to apply event handlers across a group of jQuery objects.
From what I understood based on your comments you want to show only description of image that has been clicked.
Here is my solution
$('.container').on('click', 'img', function() {
$(this).closest('.container').find('.image-description').addClass('hidden');
$(this).siblings('p').removeClass('hidden');
});
https://jsfiddle.net/rtsj6r41/
Also please mind your jquery version, because unbind() is deprecated since 3.0
You can use event delegation so that you only add your event handler once to the parent of your images. This is usually the best method for keeping work the browser has to do down. Adding and removing classes is a clean method for show and hide, because you can see what is happening by looking at your html along with other benefits like being easily able to check if an item is visible with .hasClass().
jsfiddle: https://jsfiddle.net/0yL5zuab/17/
EXAMPLE HTML
< div class="main" >
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="image-parent">
<div class="image">
</div>
<div class="image-descr">
Some text. Some text. Some text.
</div>
</div>
<div class="clear">
</div>
</div>
EXAMPLE CSS
.image-parent{
height: 100px;
width: 200px;
float: left;
margin: 5px;
}
.image-parent .image{
background: blue;
height: 50%;
width: 100%;
}
.image-descr{
display: none;
height: 50%;
width: 100%;
}
.show-descr{
display: block;
}
.clear{
clear: both;
}
EXAMPLE JQUERY
$(".main").on("click", ".image-parent", ShowDescription);
function ShowDescription(e) {
var $parent = $(e.target).parent(".image-parent");
var $desc = $parent.find(".image-descr");
$(".image-descr").removeClass("show-descr");
$desc.addClass("show-descr");
}

After hiding parts of the div remains

A colleague of mine created a template with angularjs. It consists of menus, that can be closed. This is achieved by simple jQuery. However after clicking the close button the lower part of the menu-div remains. If the mouse is moved it disappears. I can't reproduce the error in a js fiddle. Why do parts still remain, how to fix this?
HTML
<div class="menu">
<button class="close"> X close this </button>
</div>
CSS
.menu{
width: 100px;
height: 200px;
padding: 20px;
background: lightgrey;
}
.hide{
display: none;
}
JS
$('body').on('click', '.close', function(){
$(this).closest('.menu').addClass('hide');
});
/// also does not work
$('body').on('click', '.close', function(){
$(this).closest('.menu').hide();
});
First of all you are using angularjs, and you cannot use jQuery as on standard web sites.
you have this JS:
$('body').on('click', '.close', function(){
$(this).closest('.menu').addClass('hide');
});
but in moment when this script is executed there is no HTML rendered to page, so this script is usless.
You need to create a custom directive in order to make this work.
.directive('ngHideCustom', function () {
return function (scope, elm, attrs) {
$('.close', elm).click(function () {
$(this).parent().hide();
});
}
})
and you need to change the html to call this directive
<div class="menu" ng-hide-custom>
<button class="close"> X close this </button>
</div>
this way your script will be applied only when this part of HTML is rendered to page.

Toggle div on div click horizontally

I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});
Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}
I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.

Collapse/Expand a content box with a toggle

I go right to the point, I have a few boxes that I want them to be expanded and collapsed with a toggle located in their headers.
This toggle is an anchor tag which has a sprite background, the top part of this sprite image is pointing at top, and bottom section is pointing at down. You can guess what they mean and I want their state to be changed (first one for collapse and second one for expand)
The structure of the boxes are something like this :
<section class="box2">
<header class="box-head">
<div class="box-title fr">
<span class="box-icon"></span>
<h3 class="box-title-text">Title Title</h3>
</div>
<a class="box-toggle fl active" href="#">A</a>
<br class="cfx" />
</header>
<div class="box-content">
<img src="img/chart-1.png" alt="" />
//Content or collapsing data goes here
</div>
</section>
And I used one of the most straight forward ways to achieve this effect. You can see the following CSS and jQuery code below. (I chose active class as default when the icon is pointing at top)
JS :
<script type="text/javascript">
$("a.box-toggle").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
//Slide up and down on click
$("a.box-toggle").click(function(){
$(this).next("div.box-content").slideToggle("slow");
});
});
</script>
CSS :
.widget-toggle {
display: block;
overflow: hidden;
text-indent: -9999px;
width: 18px; height: 9px;
margin-top: 15px;
margin-left: 13px;
background: url(../img/sidebar-arrows.png) no-repeat 0 -18px;
}
.widget-toggle.active {
background: url(../img/sidebar-arrows.png) no-repeat 0 0;
}
Thanks for your huge help :)
Edit No. #1 :
Thanks to #Recode , their tip worked just fine, But according to what I explained and you can see in this picture. I wanna show the state of this with an Icon
Active is pointing at top and Inactive is pointing at bottom, when I want the box to be collapsed I'm showing "Active" and when I want the box to be expanded I'm showing "Inactive" .
With this code I managed to show active at default (I set the class of each box to active manually, if there is a better way to set the default class to active or whatever else please note.)
When I click on it, box collapses and the Icon transitions to Inactive state. And When I click again box expands but the Icon stays in the same state (Inactive and pointing at bottom).
And after clicking :
Here is the Code :
$("a.box-toggle").click(function(){
$(this).addClass("active");
}, function () {
$(this).addClass("inactive");
});
Thanks a lot, Again.
Just use this:
$(document).ready(function() {
//Slide up and down on click
$("a.box-toggle").click(function(){
$(this).toggleClass('inactive');
$(this).parent().next("div.box-content").slideToggle("slow");
});
});
http://jsfiddle.net/Recode/DLxaB/
updated fiddle: http://jsfiddle.net/Recode/DLxaB/1/
Try this: FIddle
jQuery code:
$("a.box-toggle").on('click', function () {
$('div.box-content').slideToggle(200).toggleClass('active');
});
.slideToggle() .toggleClass()

Categories