Develop Reference

How i can close/hide a modal popup if i click outside the modal popup

I have the following jQuery code to show a modal popup:-
$(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>
currently when i click outside the modal popup the modal popup will not be hide/close.. so can i force this behavior to my jQuery modal popup ?

You need to remove backdrop: 'static',

How to make the jQuery modal dialog boxes show once a day?

i have jQuery modal dialog boxes, witch is opening automatically and have setTimeout:
function showChat() { $(function(){
$('#chat').dialog({
autoOpen: true,
show: 'fade',
hide: 'fade',
width: 400,
height: 250,
open: function(event, ui){
setTimeout("$('#chatnsp').dialog('close')",30000);
}
}); }); } showChatp();
<a onclick="showChatnsp(); return false;"><div style="display:none; "> </div></a> <div id="chatnsp" title=" " style="display:none; "> TEXT </div>
How to make the modal window show once a day?
Found this code, but could not connect:
<script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function() {
if (!$.cookie('hideModal')) {
var delay_popup = 5000;
setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
}
$.cookie('hideModal', true, {
expires: 1,
path: '/'
});
});
</script>

jquery bootstrap accordion not expanding vertically fully

I'm using this example fiddle for nested bootstrap accordions.Fiddle here
I'm using it in MVC/Razor and I'm having trouble getting child accordions to expand fully. They only open a tiny bit and need to scroll, which is not desired.
Here's my pertinent Razor snippet: (FYI, the various style="height:150px;" attributes I added to try to get the accordions to expand but they only expanded the area around the accordions, not the accordions themselves.)
<style>
.accordion-expand-holder {
margin: 10px 0;
}
/*.accordion-expand-holder .open, .accordion-expand-holder .close {
margin: 0 10px 0 0;
}*/
.ui-accordion-content {
height: auto;
}
</style>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.js"></script>
<div class="accordion-expand-holder">
<button type="button" class="open">Expand all</button>
<button type="button" class="close">Collapse all</button>
</div>
#foreach (var item in Model)
{
<div class="accordion">
<h3>#(item.Name)</h3>
<div>
<div class="text-nowrap">
<button type="button" onclick="javascript:DeleteUserStory('#(item.Id)');">Delete</button>
<button type="button" onclick="javascript:EditUserStory('#(item.Id)');">Edit</button>
</div>
<div>Description: #(item.Description)</div>
<div>Notes: #(item.Notes)</div>
<div class="accordion" style="height:150px;">
<h3>Tasks</h3>
<ul style="height:150px;">
#if (item.Tasks != null)
{
if (item.Tasks.Count > 0)
{
foreach (var task in item.Tasks)
{
<li style="height:150px;">
<button type="button" onclick="javascript:DeleteTask('#(task.Id)');">Delete</button>
<button type="button" onclick="javascript:EditTask('#(task.Id)');">Edit</button>
<br />
#(task.Name)
<br />
Description: #(task.Description)
</li>
}
}
else
{
<li>No Tasks Assigned.</li>
}
}
</ul>
</div>
<br />
<button type="button" onclick="javascript:ShowTaskModalForAdd('#(item.Id)');">Add New Task</button>
</div>
</div>
}
<script>
// Accordion - Expand All #01
$(function () {
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: true,
});
var icons = $(".accordion").accordion("option", "icons");
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
'aria-selected': 'true',
'tabindex': '0'
});
$('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
$('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
'aria-expanded': 'true',
'aria-hidden': 'false'
}).show();
$(this).attr("disabled", "disabled");
$('.close').removeAttr("disabled");
});
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
'aria-selected': 'false',
'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
}).hide();
$(this).attr("disabled", "disabled");
$('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
$('.open').removeAttr("disabled");
$('.close').removeAttr("disabled");
});
});
//$("#accordion").accordion();

Needed this:
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: false,
heightStyle: "content" //<- this fixes the problem with the squished height
});

Looks like your issue is the autoHeight option.
You can either set it false as such: autoHeight: false,
-OR-
you can use autoHeight: true, and add heightStyle: "content", afterwards.
Source:
JQuery Accordion Auto Height issue

Problems with ins

I have a dialog window. I want to pop-up a confirm dialog, when clicking Cancel. The way I am doing this is to create a div element. In the div element I have some text, I want to display in the confirm dialog. The problem is, that the text that should be displaying in the confirm window, is instead displaying in the modal window. Like in the image below: How can I avoid this issue??
Demo
HTML:
<div>
<form>
<label>Title</label>
<input type="text" id="customTextBox" value="some value"/>
<p>Date: <input type="text" id="datepicker" value="some date"/></p>
<input type="button" id="Getbtn" value="Get value"/> <hr/><br/>
<div id="dialog-confirm" title="Close the dialog">
<p><span class="ui-icon ui-icon-alert"
style="float:left; margin:0 7px 20px 0;">
</span>These items will be permanently deleted and cannot be recovered.
Are you sure?</p>
</div>
</form>
</div>
JQuery:
$(function () {
$('#modalDialog').dialog({
modal: true,
height: 450,
width: 350,
position: 'center',
buttons: {
Save: function() { //submit
$( this ).dialog( "close" );
},
Cancel: function () { //cancel
$('#dialog-confirm').dialog({
resizable: false,
height: 300,
modal: true,
draggable: false,
buttons: {
OK: function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
}
});
return false;

By adding the following to your CSS:
#dialog-confirm
{
display:none;
}
jQuery will then automatically show it when clicking Cancel.

Using jquery to show next div element

I am using colorbox.js to display some forms in a lightbox. There are multiple forms on a page and each form has a link that will open the form in the lightbox. Right now, the lightbox will open but the form will not be showing. Here is my jquery script:
jQuery(document).ready(function() {
$('.myForm').hide();
$('.link_to_form').click( function() { $(this).next('.myForm').show() } );
$(".link_to_form").colorbox({
width: "50%",
inline: true,
opacity: ".5",
href: ".myForm",
onClosed: function() {
$(".myForm").hide();
}
});
});
My HTML for two forms and two links is:
Form 1
<div class="myForm">
<form></form>
</div>
Form 2
<div class="myForm">
<form></form>
</div>

Working demo http://jsfiddle.net/2anwK/3/
script
<script type='text/javascript' src="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/jquery.colorbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.benariac.fr/fabien/jsfiddle/colorbox/colorbox/colorbox.css">
code
$('.myForm').hide();
$('.link_to_form').click(function() {
$(this).next('.myForm').show()
});
$(".link_to_form").colorbox({
width: "50%",
inline: true,
opacity: ".5",
href: ".myForm",
onClosed: function() {
$(".myForm").hide();
}
});
Working Image

Here is what you have to do:
You can take a look the reference to see how to implement.
HTML
Form 1
<div id="myForm1" class="myForm">
<form>
<p>text1</p>
</form>
</div>
Form 2
<div id="myForm2" class="myForm">
<form>
<p>text2</p>
</form>
</div>
JS
jQuery(".link_to_form").on('click', function() {
var $self = $(this),
$popup = $self.next('.myForm');
$self.colorbox({
width: "50%",
inline: true,
opacity: "0.5",
onOpen: function() {
$popup.show();
},
onClosed: function() {
$popup.hide();
}
});
});
css
.myForm{
display: none;
}
DEMO