Develop Reference

Stop/destroy Magnific Popup in jQuery

I want to prevent magnificPopup dialog from displaying when I click a button and when no checkboxes are checked.
Here is what I have tried already:
$('[id$=DeleteSelectedItems]').click(function (evt) {
if ($("#datatable :checked").length == 0) {
evt.preventDefault();
$.magnificPopup.remove(); //prevent dialog popup if no checkbox selected
}
});
The above code is doing what I want except $.magnificPopup.remove(); is not a valid function.
So although $.magnificPopup.remove(); prevents the popup from showing, (because it breaks the JavaScript!) it is not a valid function and I get an error in my console when testing this. I have tried $.magnificPopup.destroy(); and $.magnificPopup.stop(); but they are also not valid.
Many thanks for any help you can provide with this!

Thanks for your replies. I ended up using $.magnificPopup.close(); but, importantly, I put my code after the initialisation of magnific popup. Previously, I had it before the initialisation. Stupid mistake! So my working jQuery is:
// initialise magnific popup
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true
});
//don't fire the delete button if no checkbox selected in table with id of datatable
$('[id$=DeleteSelectedItems]').click(function (evt) {
if ($("#datatable :checked").length == 0) {
evt.preventDefault();
$.magnificPopup.close(); //prevent dialog popup if no checkbox selected
}
});
Many thanks for pointing me in the right direction! : )

Maybe evt.preventDefault(); is enough to stop the popup showing, and you can remove the line of code $.magnificPopup.remove(); avoiding in this way the error in the console.

This is how to destroy magnificPopup according to the HTML markup in the snippet below:
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
// initialize magnificPopup
function initMagnificPopup() {
$('.thumbs').magnificPopup({
type: 'image',
delegate: 'a',
gallery: {
enabled: true
}
});
}
// destroy magnificPopup
function destroyMagnificPopup() {
$.magnificPopup.close();
$('.thumbs').off('click');
$('.thumbs a').off('click');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<button type="button" onclick="initMagnificPopup()">initialize magnificPopup</button>
<div class="thumbs">
<a href="https://picsum.photos/id/237/800.jpg" target="_blank">
<img src="https://picsum.photos/id/237/100.jpg">
</a>
<a href="https://picsum.photos/id/1003/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1003/100.jpg">
</a>
<a href="https://picsum.photos/id/1011/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1011/100.jpg">
</a>
<a href="https://picsum.photos/id/1025/800.jpg" target="_blank">
<img src="https://picsum.photos/id/1025/100.jpg">
</a>
</div>
<button type="button" onclick="destroyMagnificPopup()">destroy magnificPopup</button>

JQuery dialog close

I'm facing a problem with dialog closing in JQuery
Here's the code I have :
$(window).on("click",function(e){
if($(e.target).not("#test")){
$("#test").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">
Well, function works like it supposed to(closes dialog when I click outside of it's content) but then I can't toggle it again. Because of the function, I suppose.
Also I tried to fix it with such way but it don't work either :
if($("#test").css("display","block")){
$(window).on("click",function(e){
if($(e.target).not("#test")){
$("#test").hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">
Is there any way to fix this?
That you very much for spending your precious time with my problem!
Thank you very much for any help or advice!

Your submit click event fires first and then the window click event fires. Hence your dialog keeps getting hidden. Ensure you are not propagating the click event from your submit button if you want to show the dialog.
You might want to add validation to ensure your dialog is not already open when clicking submit though.
$(window).on("click", function(e) {
console.log('window click');
if ($(e.target).not("#test")) {
$("#test").hide();
}
});
$('input[type=submit]').on('click', function(){
$('#test').show();
event.stopPropagation();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="">

You don't need show or hide functions, you just need to use the open property and change it to false or true.
$(window).on("click",function(e){
if($(e.target).not("#test") && !$(e.target).is("#submit")){
$("#test")[0].open = false; // or document.getElementById("test").open = false;
}
});
$('#submit').click(function() {
$('#test')[0].open = true; // // or document.getElementById("test").open = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" id="submit">

disable javascript function

I'm have a function which shows a div when the user types something but it interferes with a page where I have an input. I would like to disable the script when the part of the page with the div that holds the inputs is visible so that when the user is typing in the input the .editPro doesn't show().
HTML
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;">
<input type='text' />
</div>
<div class="editPro" style="width:100%;height:100%;position: fixed;display:none;background:red;"></div>
<div id='edit'>edit</div>
JAVASCRIPT
$('#edit').click(function (event) {
$(".green").show("slow");
});
$(document).keypress(function (event) {
$(".editPro").show("slow");
});
here is a Fiddle to illustrate the problem

Just check the target node. If it is not an input, then execute your script
$(document).keypress(function (event) {
if(event.target.nodeName !== "INPUT"){
$(".editPro").show("slow");
}
});
Fiddle

I have done some changes in your code hope this helps
try this FIDDLE
http://jsfiddle.net/venkat_asman/Un8yv/2/
<div class="green" style="width:100%;height:100%;position: fixed;display:none;background:green;z-index:100;">
</div>
<div class="editPro" style="width:100%;height:100%;position:fixed;display:none;background:red;z-index:100;"></div>
<div id='edit'>edit</div>
<input style="z-index:1000;display:none;position:fixed;" type='text' />
and JS is
$('#edit').click(function(event){
$(".green").show("slow");
$("input").show();
$('#edit').hide();
});
$(document).keypress(function(event){
$(".editPro").show("slow");
});

I'm not sure if I understand the question correctly, but maybe this is what you are looking for (it prevents the red div from appearing when you type inside a <input/>):
$('input').keypress(function (event) {
event.stopPropagation();
});
http://jsfiddle.net/Un8yv/1/

Hiding the closest div with the specified class

I'm working on an application in which mimics desktop style application windows that open, minimize and close. I've managed to get them to expand and collapse, but I am unable to get the to close, and I can't figure out why. I need to be able to close the current div by clicking a button, see code / eg. below.
<script>
$(document).ready(function () {
$("form.common").first().show();
$(".expand").click(function () {
$(this).parents().next("form.common").show();
})
$(".collapse").click(function () {
$(this).parents().next("form.common").hide();
});
$(".close").click(function () {
$(this).parents().next("div.module").hide();
});
});
</srcipt>
<div id="task_manager" class="module"> <!-- Need the x with class close to hide this div-->
<h3>Task Manager</h3> <!-- This header and below icons are shown when minimized-->
<div class="module_actions">
<span class="icons_small right close">X</span>
<span class="icons_small right collapse">-</span>
<span class="icons_small right expand">+</span>
</div>
<form class="common">
<fieldset>
<legend> Some Titlee/legend>
</fieldset>
</form>
</div>
Can anyone see why this is not hiding the div?
THanks,

The answer is in the question:
$(".close").click(function () {
$(this).closest("div.module").hide();
});
Demo fiddle
Also you should change your calls to parents() to just parent() so you just go up one level in the DOM tree

You had a missing < in <legend> Some Titlee/legend>, after that it works.
Check here

This should work :
$(".close").click(function () {
$(this).parent().hide();
});
JSFiddle
Doc : parent()

closing element opened by toggle() function

How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.

You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin

Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});

Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});

Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);