Detach and Attach div as a dialog in jquery - javascript

I have a div with some id that contains some buttons/labels. Its a container itself. I want to have a button that when user clicks on the button a dialog has to appear with the same div but the div has to disappear from the page. So when Detach button is clicked a dialog appears with that div and button changes into Attach. When attach is clicked dialog disappears and regular div appears on the page.
This is what i tried so far, it works only when Detach is clicked, if Attach is clicked dialog closes but regular div does not show up.
$(document).on('click', '#detach', function() {
var button = $(this).text();
if (button == 'Detach') {
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$('.search_div_box').dialog('open');
$(this).html('Attach');
} else if (button == 'Attach') {
$('.search_div_box').dialog('close');
$(this).html('Detach');
}
});
i know im missing a code in Attach part it only closes the dialog but i tried various things like appending to body again the div and so on but didnt work. Thank you


You could use jQuery's $.clone() to create a duplicate of the div and then show/hide it along with the dialog like this:
var $original = $('.search_div_box');
var $clone = $('.search_div_box').clone();
$clone.dialog({
autoOpen: false,
width: 700,
});
$(document).on('click', '#detach', function() {
var button = $(this).text();
if (button == 'Detach') {
$original.hide();
$clone.dialog('open');
$(this).html('Attach');
} else if (button == 'Attach') {
$original.show();
$clone.dialog('close');
$(this).html('Detach');
}
});​
JSFiddle Here


Try this:
html:
<button id="button">Attach</button>
javascript (jquery):
$("#button").click(function() {
var button = $(this).html();
if (button === "Attach") {
$('.search_div_box').dialog('close');
$(this).html('Detach');
}
else {
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$('.search_div_box').dialog('open');
$(this).html('Attach');
}
});
That should work :)


Try this:
HTML
<button class="content detach"></button>
CSS
.content.detach:after {
content: "Detach";
}
.content.attach:after {
content: "Attach";
}
JS
$('.search_div_box').dialog({ autoOpen: false, width: 700 });
$(".content, .ui-dialog-titlebar-close").on("click", function(){
if ($(".content").hasClass("detach")) {
$('.search_div_box').dialog('open');
} else {
$('.search_div_box').dialog('close');
}
$(".content").toggleClass("detach attach");
});
DEMO:
http://jsfiddle.net/n8Mbz/

Related

Menu should disappear when clicked somewhere else

I have a div which should be visible, whenever a button is clicked. It's like a menu. Afterwards, it should disappear (toggle), when the button is clicked again or when the user clicks somewhere else on the page (whole body).
In my current approach, the menu constantly toggles, so both functions (see below) are being triggered.
$("#b1").click(function() {
$("#menu").toggle("slide");
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
How should I improve my code, so that the menu only disappears when the button is clicked again or when the user clicks somewhere else?
Here is a fiddle.

Use $(window) to attach the event, then you can close the menu anywhere.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false;
});
$(window).click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
Check demo: https://jsfiddle.net/wru8mvxt/5/

You can use e.target and check whenever it's not the menu or the button which got clicked. Otherwise the menu closed even on the button click or on a click inside.
$("#b1").click(function() {
$("#menu").slideDown();
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
} else {
e.preventDefault();
}
});
If you want the menu to stay even on click inside, just add && !$(e.target).is("#menu") to the if condition.
Working example.

I think your code looks good.. I see one problem when you click on menu it will be hide.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false; // prevent to pass click event to body
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
$("#menu").click(function(e){
e.preventDefault();
return false;
});

Use something like this:
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});

Try this.
$("#b1").click(function() {
event.stopPropagation();
$("#menu").toggle("slide");
});
$("body").click(function() {
if(!$(event.target).closest('#menu').length){
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
}
});

I think this code will solve your issue. You can use e.target property to find whether user clicked on button or outside button. When user click on button b1 it enters both b1 click event and body click event. So if in order to find where the user is clicked you can use event.target property.
Clicking the button will toggle the menu visibility.
Clicking outside the button will close the menu if it is opened.
$("#b1").click(function() {
$("#menu").toggle("slide");
$("#b1").text() == "hide menu" ? $("#b1").text("show menu") : $("#b1").text("hide menu");
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
}
else {
e.preventDefault();
}
});
Working fiddle

You have to do following changes.
$(document).ready(function() {
$("#b1").click(function(e) {
$("#menu").slideToggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#menu, #menu *')) {
$("#menu").slideUp();
}
});
});

Add/remove class on click - how do I remove the class on a second click area?

I have a menu with a dropdown, where the LI element gets an activeclass on click. I have, after a lot if struggle, managed to set a script that sets an active class to an div that I have hidden, which shows on the click as an overlay of the site (under the dropdown). everything works as It should, except if I click outside the dropdown to close it instead of clicking the menubutton. This doesnt change my overlay div's class- how do I change my script to work on clicks outside the dropdown aswell, and what should I target here?
The hidden div:
<div id="site-overlay"></div>
script:
$.noConflict();
jQuery(document).ready(function(){
jQuery('li').on('click', function(){
if(jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
})
});

This will work:
$.noConflict();
jQuery(document).ready(function () {
jQuery('li').on('click', function () {
if (jQuery(this).hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
});
jQuery("#site-overlay").click(function () {
jQuery(this).removeClass("active");
});
});
Notice the new event handler.

You can add a click event to the document body and then check the click location:
$(document).click(function(event) {
if(!$(event.target).closest('#site-overlay').length) {
if($('#site-overlay').is(":visible")) {
$('#site-overlay').hide()
}
}
})

jQuery('li').on('click', function(){
...
}
This executes only when you click on 'li' element.
But what about clicking outside 'li' element?
Try to add or replace:
jQuery('body').on('click', function(){
if(jQuery('.megamenu li').hasClass('active')) {
jQuery("#site-overlay").addClass("active");
} else {
jQuery("#site-overlay").removeClass("active");
}
}

JQGrid onSelectRow event and jquery.simplemodal.js modal dialog

I am trying to show a modal window using jquery.simplemodal.js JQuery plugin everytime I click on a row of a JQGrid.
After doing it, once the user click "Yes" on the modal window I show a document on an Iframe using the info retrieved from my row, if they click "No" then the Iframe shows a form to edit some info related to this document. The idea is to keep the Iframe content blank until the user clicks on one of the buttons. To accomplish this I am using JQGrid onSelectRow event as follows:
onSelectRow: function () {
var id = $("#tabResBusUbi").getGridParam('selrow');
var row = $('#tabResBusUbi').jqGrid('getRowData', id);
viewDocument = false;
myconfirm('Open the document view?', function () {
viewDocument = true;
});
if (viewDocument) {
$('#ifrShowPdf').ready(function () {
$('#divLoading').css('display', 'none');
});
$('#ifrShowPdf').attr('src', 'resource\\' + row.filepath);
$('#ifrShowPdf').css('display', 'block');
} else {
var rnd = Math.floor(Math.random() * 11);
$('#ifrShowPdf').attr('src', 'document.asp?r=' + rnd + '&o=d&a=a&p=' + id);
$('#ifrShowPdf').css('display', 'block');
}
return false;
}
function myconfirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%", ],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
$('.yes', dialog.data[0]).click(function () {
if ($.isFunction(callback)) {
callback.apply();
$('#confirm-overlay').css('z-index', 5000);
}
modal.close();
});
}
});
}
After I click on the row, the modal popups, but also the Iframe shows the edit document form even when I haven't clicked on any of the option buttons. If I click the "Yes" option after, the document is viewed but, this is not what I intend to do.
I would appreciate any suggestions to make this work.

jQuery menu with click to show and hide on mouseleave

At the moment it shows the divs instead of hiding them and on click it hides just so you can see the movement. Should be .show instead of .hide. On clicking the link, li should slide down and on mouseleave slide back up.
Working example http://jsfiddle.net/DTqDD/3/
jQuery:
$(function() {
var toggleMenu = function(e) {
var self = $(this),
elemType = self[0].tagName.toLowerCase(),
//get caller
menu = null;
if (elemType === 'a') {
//anchor clicked, nav back to containing ul
menu = self.parents('ul').not('ul#mainmenu');
} else if (elemType === 'ul') {
//mouseleft ul, ergo menu is this.
menu = self;
}
if (menu) {
menu.hide('medium');
}
e.preventDefault();
return false;
};
$(document).ready(function() {
$('a.drop').click(function(e) {
$('li#mainmenudrop').show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li#mainmenudrop a').click(toggleMenu);
$('li#mainmenudrop').mouseleave(toggleMenu);
});
});

On li tags change id="mainmenudrop" to class="mainmenudrop" since it ain't valid HTML. Then use the following jQuery code.
$(document).ready(function() {
$('a.drop').click(function(e) {
$(this).next("div").show('medium');
console.log('div clicked');
e.preventDefault();
return false;
});
$('li.mainmenudrop').mouseleave(function() {
$(this).children("div").hide('medium');
});
});​
Could this possibly be what you are trying to accomplish?
EDIT:
If you want the divs hidden at the beginning, just add this CSS:
.mainmenudrop div {
display: none;
}

jQuery UI - Close Dialog When Clicked Outside

I have a jQuery UI Dialog that gets displayed when specific elements are clicked. I would like to close the dialog if a click occurs anywhere other than on those triggering elements or the dialog itself.
Here's the code for opening the dialog:
$(document).ready(function() {
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 50,
resizable: false,
width: 375
});
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html($hint.html());
$field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
/*$(document).click(function() {
$field_hint.dialog('close');
});*/
});
If I uncomment the last part, the dialog never opens. I assume it's because the same click that opens the dialog is closing it again.
Final Working Code
Note: This is using the jQuery outside events plugin
$(document).ready(function() {
// dialog element to .hint
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 0,
resizable: false,
width: 376
})
.bind('clickoutside', function(e) {
$target = $(e.target);
if (!$target.filter('.hint').length
&& !$target.filter('.hintclickicon').length) {
$field_hint.dialog('close');
}
});
// attach dialog element to .hint elements
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
$field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
// trigger .hint dialog with an anchor tag referencing the form element
$('.hintclickicon').click(function(e) {
e.preventDefault();
$($(this).get(0).hash + ' .hint').trigger('click');
});
});

Sorry to drag this up after so long but I used the below. Any disadvantages? See the open function...
$("#popup").dialog(
{
height: 670,
width: 680,
modal: true,
autoOpen: false,
close: function(event, ui) { $('#wrap').show(); },
open: function(event, ui)
{
$('.ui-widget-overlay').bind('click', function()
{
$("#popup").dialog('close');
});
}
});

Forget using another plugin:
Here are 3 methods to close a jquery UI dialog when clicking outside popin:
If the dialog is modal/has background overlay: http://jsfiddle.net/jasonday/6FGqN/
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 100,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});
If dialog is non-modal Method 1: method 1: http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
Non-Modal dialog Method 2: http://jsfiddle.net/jasonday/eccKr/
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
}
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});

Check out the jQuery Outside Events plugin
Lets you do:
$field_hint.bind('clickoutside',function(){
$field_hint.dialog('close');
});

Just add this global script, which closes all the modal dialogs just clicking outsite them.
$(document).ready(function()
{
$(document.body).on("click", ".ui-widget-overlay", function()
{
$.each($(".ui-dialog"), function()
{
var $dialog;
$dialog = $(this).children(".ui-dialog-content");
if($dialog.dialog("option", "modal"))
{
$dialog.dialog("close");
}
});
});;
});

$(".ui-widget-overlay").click (function () {
$("#dialog-id").dialog( "close" );
});
Fiddle showing the above code in action.

I had to do two parts. First the outside click-handler:
$(document).on('click', function(e){
if ($(".ui-dialog").length) {
if (!$(e.target).parents().filter('.ui-dialog').length) {
$('.ui-dialog-content').dialog('close');
}
}
});
This calls dialog('close') on the generic ui-dialog-content class, and so will close all dialogs if the click didn't originate in one. It will work with modal dialogs too, since the overlay is not part of the .ui-dialog box.
The problem is:
Most dialogs are created because of clicks outside of a dialog
This handler runs after those clicks have created a dialog and bubbled up to the document, so it immediately closes them.
To fix this, I had to add stopPropagation to those click handlers:
moreLink.on('click', function (e) {
listBox.dialog();
e.stopPropagation(); //Don't trigger the outside click handler
});

This question is a bit old, but in case someone wants to close a dialog that is NOT modal when user clicks somewhere, you can use this that I took from the JQuery UI Multiselect plugin. The main advantage is that the click is not "lost" (if user wants to click on a link or a button, the action is done).
$myselector.dialog({
title: "Dialog that closes when user clicks outside",
modal:false,
close: function(){
$(document).off('mousedown.mydialog');
},
open: function(event, ui) {
var $dialog = $(this).dialog('widget');
$(document).on('mousedown.mydialog', function(e) {
// Close when user clicks elsewhere
if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){
$myselector.dialog('close');
}
});
}
});

You can do this without using any additional plug-in
var $dialog= $(document.createElement("div")).appendTo(document.body);
var dialogOverlay;
$dialog.dialog({
title: "Your title",
modal: true,
resizable: true,
draggable: false,
autoOpen: false,
width: "auto",
show: "fade",
hide: "fade",
open:function(){
$dialog.dialog('widget').animate({
width: "+=300",
left: "-=150"
});
//get the last overlay in the dom
$dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
$dialogOverlay.unbind();
$dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
$dialog.dialog("close");
});
}
});
Here $dialog is the dialog.
What we are basically doing is to get the last overlay widget whenever this dialog is opened and binding a click handler to that overlay to close $dialog as anytime the overlay is clicked.

no need for the outside events plugin...
just add an event handler to the .ui-widget-overlay div:
jQuery(document).on('click', 'body > .ui-widget-overlay', function(){
jQuery("#ui-dialog-selector-goes-here").dialog("close");
return false;
});
just make sure that whatever selector you used for the jQuery ui dialog, is also called to close it.. i.e. #ui-dialog-selector-goes-here

This doesn't use jQuery UI, but does use jQuery, and may be useful for those who aren't using jQuery UI for whatever reason. Do it like so:
function showDialog(){
$('#dialog').show();
$('*').on('click',function(e){
$('#zoomer').hide();
});
}
$(document).ready(function(){
showDialog();
});
So, once I've shown a dialog, I add a click handler that only looks for the first click on anything.
Now, it would be nicer if I could get it to ignore clicks on anything on #dialog and its contents, but when I tried switching $('*') with $(':not("#dialog,#dialog *")'), it still detected #dialog clicks.
Anyway, I was using this purely for a photo lightbox, so it worked okay for that purpose.

The given example(s) use one dialog with id '#dialog', i needed a solution that close any dialog:
$.extend($.ui.dialog.prototype.options, {
modal: true,
open: function(object) {
jQuery('.ui-widget-overlay').bind('click', function() {
var id = jQuery(object.target).attr('id');
jQuery('#'+id).dialog('close');
})
}
});
Thanks to my colleague Youri Arkesteijn for the suggestion of using prototype.

This is the only method that worked for me for my NON-MODAL dialog
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('#dlg').dialog("close");
}
});
All credit goes to Axle
Click outside non-modal dialog to close

For those you are interested I've created a generic plugin that enables to close a dialog when clicking outside of it whether it a modal or non-modal dialog. It supports one or multiple dialogs on the same page.
More information here: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
Laurent

I use this solution based in one posted here:
var g_divOpenDialog = null;
function _openDlg(l_d) {
// http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
jQuery('body').bind(
'click',
function(e){
if(
g_divOpenDialog!=null
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
_closeDlg();
}
}
);
setTimeout(function() {
g_divOpenDialog = l_d;
g_divOpenDialog.dialog();
}, 500);
}
function _closeDlg() {
jQuery('body').unbind('click');
g_divOpenDialog.dialog('close');
g_divOpenDialog.dialog('destroy');
g_divOpenDialog = null;
}

I had same problem while making preview modal on one page. After a lot of googling I found this very useful solution. With event and target it is checking where click happened and depending on it triggers the action or does nothing.
Code Snippet Library site
$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content'))
return;
} else {
$('#modal-background').hide();
}
});

İt's simple actually you don't need any plugins, just jquery or you can do it with simple javascript.
$('#dialog').on('click', function(e){
e.stopPropagation();
});
$(document.body).on('click', function(e){
master.hide();
});

I don't think finding dialog stuff using $('.any-selector') from the whole DOM is so bright.
Try
$('<div />').dialog({
open: function(event, ui){
var ins = $(this).dialog('instance');
var overlay = ins.overlay;
overlay.off('click').on('click', {$dialog: $(this)}, function(event){
event.data.$dialog.dialog('close');
});
}
});
You're really getting the overlay from the dialog instance it belongs to, things will never go wrong this way.

With the following code, you can simulate a click on the 'close' button of the dialog (change the string 'MY_DIALOG' for the name of your own dialog)
$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();

Smart Code:
I am using following code so that every thing remains clear and readable.
out side body will close the dialog box.
$(document).ready(function () {
$('body').on('click', '.ui-widget-overlay', closeDialogBox);
});
function closeDialogBox() {
$('#dialog-message').dialog('close');
}

I ended up using this code which should work on any open dialogs on the page, ignores clicks on tooltips, and cleans up the resources of the dialog being closed as well.
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip') || clicked.parents().is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('.ui-dialog-content').dialog("close");
$('.ui-dialog-content').dialog("destroy");
$('.ui-dialog-content').detach();
}
});

I just ran across the need to close .dialog(s) with an out of element click. I have a page with a lot of info dialogs, so I needed something to handle them all. This is how I handled it:
$(document).ready(function () {
$(window).click(function (e) {
$(".dialogGroup").each(function () {
$(this).dialog('close');
})
});
$("#lostEffClick").click(function () {
event.stopPropagation();
$("#lostEffDialog").dialog("open");
};
});

Categories