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.
Related
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>
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
I want to style my 'cancel' and 'save' button using Jquery, how can I do that? Here is my code sample (for cropping image):
$("#img-container").dialog({
modal: true,
autoOpen: false,
width: 1220,
height: 730,
title: "CROP IMAGE",
closeOnEscape: false,
dialogClass: "no-close success-dialog",
open: function (event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
},
buttons: {
Cancel: function () { /* style this 'cancel button'*/
$(this).dialog("close");
},
Save: function () { /* style this 'save' button*/
document.getElementById("item-img").src = currentImage;
cropImage(self.imageFiles[0].name, x, y, width, height);
$(this).dialog("close");
}
}
});
Any suggestion?
Here is my working example in FIDDLE
HTML
<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This is an example to change button style</p>
</div>
JS
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons:{
"Save":{
text:'Save',
},
"Cancel":{
text:'Cancel',
}
}
});
$('.ui-dialog-buttonpane :button').each(function(){
if($(this).text() === 'Save') {
$(this).css('background', 'green');
}
else if($(this).text() === 'Cancel') {
$(this).css('background', 'red');
}
});
If you are okay with also adding jQuery-UI, it can be very simple:
$('#buttonID').button();
Example:
jsFiddle Demo:
HTML:
<div id="btn">
<div id="middle">
<img src="http://placekitten.com/100/180" />
</div>
<input id="btnOk" type="button" value="OK" />
<input id="btnCancel" type="button" value="Cancel" />
</div>
<input id="mybutt" type="button" value="Open Dialog" />
javascript/jQuery:
$('#btnOk').button();
$('#btnCancel').button();
$('#btn').dialog({
autoOpen: false
});
$('#mybutt').click(function(){
$('#btn').dialog('open');
});
$('#btnOk').click(function(){
alert('you said OK');
$('#btn').dialog('close');
});
$('#btnCancel').click(function(){
alert('you said Cancel');
$('#btn').dialog('close');
});
If you can assign an ID, it would just be:
$('#cancelButton').css('background-color','red');
$('#saveButton').css('background-color','green');
I would like to have two buttons to open each one a diferent modal window with diferente content.
I am using this example from yui: http://yuilibrary.com/yui/docs/panel/panel-form-example.html
Things i try that did not work:
1. trying to duplicate the code
1. trying to duplicate the code and naming each div with a diferent name . Eg.:
Add and Add 1
and
This is the code from the example:
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.12.0/build/cssreset/reset-min.css&3.12.0/build/cssfonts/fonts-min.css&3.12.0/build/cssbase/base-min.css">
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
<div id="dt"></div>
<p><button id="addRow">Add</button></p>
<div id="panelContent">
<div class="yui3-widget-bd">
</div>
</div>
<div id="nestedPanel"></div>
<script type="text/javascript">
YUI().use('datatable-mutable', 'panel', 'dd-plugin', function (Y) {
// Create the datatable with some gadget information.
var idField = Y.one('#productId'),
nameField = Y.one('#name'),
priceField = Y.one('#price'),
addRowBtn = Y.one('#addRow'),
cols = ['id', 'name', 'price'],
data = [
{id:'ga-3475', name:'gadget', price:'$6.99'},
{id:'sp-9980', name:'sprocket', price:'$3.75'},
{id:'wi-0650', name:'widget', price:'$4.25'}
],
dt, panel, nestedPanel;
// Define the addItem function - this will be called when 'Add Item' is
// pressed on the modal form.
function addItem() {
dt.addRow({
id : idField.get('value'),
name : nameField.get('value'),
price: priceField.get('value')
});
idField.set('value', '');
nameField.set('value', '');
priceField.set('value', '');
panel.hide();
}
// Create the main modal form.
panel = new Y.Panel({
srcNode : '#panelContent',
headerContent: 'Add A New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn.on('click', function (e) {
panel.show();
});
});
</script>
Thank's in advance
I just work out in an example wich works :
<!DOCTYPE html>
<html lang="en" class="yui3-loading">
<head>
<meta charset="utf-8">
<title>Using a panel to show a modal form</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.12.0/build/cssreset/reset-min.css&3.12.0/build/cssfonts/fonts-min.css&3.12.0/build/cssbase/base-min.css">
<script src="http://yui.yahooapis.com/3.12.0/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<style type="text/css">
#desc {
margin-bottom: 20px;
border-bottom: 1px dotted #333;
}
#desc span {
background: #a3350d;
padding :2px;
color:# f27243;
}
.yui3-panel {
outline: none;
}
.yui3-panel-content .yui3-widget-hd {
font-weight: bold;
}
.yui3-panel-content .yui3-widget-bd {
padding: 15px;
}
.yui3-panel-content label {
margin-right: 30px;
}
.yui3-panel-content fieldset {
border: none;
padding: 0;
}
.yui3-panel-content input[type="text"] {
border: none;
border: 1px solid #ccc;
padding: 3px 7px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 100%;
width: 200px;
}
#addRow {
margin-top: 10px;
}
#dt {
margin-left: 1em;
}
#dt th, #dt td {
border: 0 none;
border-left: 1px solid #cbcbcb;
}
</style>
<h2>Using a panel to show a modal form</h2>
<div class="yui3-u-1">
<div id="dt"></div>
<p><button id="addRow">Add 1</button></p>
<p><button id="addRow2">Add 2</button></p>
<div id="panelContent">
<div class="yui3-widget-bd">
<form>
<fieldset>
<p>
<label for="id">ID</label><br/>
<input type="text" name="id" id="productId" placeholder="">
</p>
<p>
<label for="name">Name</label><br/>
<input type="text" name="name" id="name" value="" placeholder="">
</p>
<p>
<label for="password">Price</label><br/>
<input type="text" name="price" id="price" value="" placeholder="$">
</p>
</fieldset>
</form>
</div>
</div>
<div id="nestedPanel"></div>
<p></p>
<div id="panelContent2">
<div class="yui3-widget-bd">
<form>
<fieldset>
<p>
<label for="id">ID</label><br/>
<input type="text" name="id" id="productId" placeholder="">
</p>
<p>
<label for="name">Name</label><br/>
<input type="text" name="name" id="name" value="" placeholder="">
</p>
<p>
<label for="password">Price</label><br/>
<input type="text" name="price" id="price" value="" placeholder="$">
</p>
</fieldset>
</form>
</div>
</div>
<div id="nestedPanel2"></div>
</div>
<script type="text/javascript">
YUI().use('datatable-mutable', 'panel', 'dd-plugin', function (Y) {
// Create the datatable with some gadget information.
var idField = Y.one('#productId'),
nameField = Y.one('#name'),
priceField = Y.one('#price'),
addRowBtn = Y.one('#addRow'),
addRowBtn2 = Y.one('#addRow2'),
cols = ['id', 'name', 'price'],
data = [
{id:'ga-3475', name:'gadget', price:'$6.99'},
{id:'sp-9980', name:'sprocket', price:'$3.75'},
{id:'wi-0650', name:'widget', price:'$4.25'}
],
dt, panel, nestedPanel;
// Define the addItem function - this will be called when 'Add Item' is
// pressed on the modal form.
function addItem() {
dt.addRow({
id : idField.get('value'),
name : nameField.get('value'),
price: priceField.get('value')
});
idField.set('value', '');
nameField.set('value', '');
priceField.set('value', '');
panel.hide();
}
// Define the removeItems function - this will be called when
// 'Remove All Items' is pressed on the modal form and is confirmed 'yes'
// by the nested panel.
function removeItems() {
dt.data.reset();
panel.hide();
}
// Instantiate the nested panel if it doesn't exist, otherwise just show it.
function removeAllItemsConfirm() {
if (nestedPanel) {
return nestedPanel.show();
}
nestedPanel = new Y.Panel({
bodyContent: 'Are you sure you want to remove all items?',
width : 400,
zIndex : 6,
centered : true,
modal : true,
render : '#nestedPanel',
buttons: [
{
value : 'Yes',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
nestedPanel.hide();
panel.hide();
removeItems();
}
},
{
value : 'No',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
nestedPanel.hide();
}
}
]
});
}
// Create the DataTable.
dt = new Y.DataTable({
columns: cols,
data : data,
summary: 'Price sheet for inventory parts',
caption: 'Price sheet for inventory parts',
render : '#dt'
});
// Create the main modal form.
panel = new Y.Panel({
srcNode : '#panelContent',
headerContent: 'Add A New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
panel.addButton({
value : 'Add Item',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
addItem();
}
});
panel.addButton({
value : 'Remove All Items',
section: Y.WidgetStdMod.FOOTER,
action : function (e) {
e.preventDefault();
removeAllItemsConfirm();
}
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn.on('click', function (e) {
panel.show();
});
//custom
// Create the main modal form.
panel2 = new Y.Panel({
srcNode : '#panelContent2',
headerContent: 'Add A New New Product',
width : 250,
zIndex : 5,
centered : true,
modal : true,
visible : false,
render : true,
plugins : [Y.Plugin.Drag]
});
// When the addRowBtn is pressed, show the modal form.
addRowBtn2.on('click', function (e) {
panel2.show();
});
});
</script>
</body>
</html>
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