I want to be able to close this dialog box and have it transfer to an object
I've tried using this... not luck
close: function() {
$(this).effect( 'transfer', { to: "#smpb_info_btn", className: "ui-effects-transfer" }, 500 );$(this).remove();
}
Now I'm tring this... still no luck
$PMinfo_Dialog.dialog({
autoOpen: true,
height: 250,
width: 600,
modal: false,
draggable: false,
resizable: false,
hide:{
effect:"transfer",
options:{from: "#smpb_info_btn", className: "ui-effects-transfer"},
speed:500
} ,
close: function() { $(this).remove();},
});
$PMinfo_Dialog.dialog( "open" );
This working jsFiddle demo should be what you need:
HTML:
<div id="PMinfo">Hello</div>
<button id="smpb_info_btn">Info</button>
CSS:
.ui-effects-transfer { border: 2px dotted gray; }
JS:
$("#PMinfo").dialog({
autoOpen: true,
height: 250,
width: 600,
modal: false,
draggable: false,
resizable: false,
beforeClose: function() {
var $this = $(this);
$this
.dialog("widget")
.effect("transfer", {
to: "#smpb_info_btn",
className: "ui-effects-transfer"
}, 500, function() {
$this.remove();
});
}
});
Related
I want to remove this triangle from panel, it comes while showing tooltip using extjs3.
CODE SNIPPET
var tooltipHide = new Ext.ToolTip({
anchor: 'bottom',
target: 'summaryButton',
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
mouseOffset: [0, 25],
autoHide: false,
closable: false,
autoScroll: true,
html: '<div style="overflow:hidden;height:480px;width:300px;">' +
mycaseSummaryData + '</div>',
});
I am calling tooltip on mouseover event using tooltipHide.show().
You can do using css, In css you just need to set background-size: 0px;.
like below example:
<style>
.x-custom-tooltip .x-tip-anchor{
background-size: 0px;
}
</style>
In this FIDDLE, I have created a demo using your code and put some modification. I hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.onReady(function () {
new Ext.Panel({
title: 'Example of tooltip in ExtJS 3.4',
renderTo: Ext.getBody(),
padding: 10,
items: [{
xtype: 'button',
text: 'Summary Button',
listeners: {
afterrender: function (btn) {
btn.tooltipHide = new Ext.ToolTip({
anchor: 'bottom',
cls: 'x-custom-tooltip',
target: btn.getEl(),
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
autoHide: false,
autoScroll: true,
html: '<span style="color: green;">This tooltip using showBy method and css....<span>',
});
btn.el.on('mouseover', function (e) {
this.tooltipHide.showBy(this.getEl(), 'tl-tr');
}, btn);
btn.el.on('mouseout', function (e) {
this.tooltipHide.hide();
}, btn);
}
}
}, {
xtype: 'tbspacer',
height: 20
}, {
xtype: 'button',
text: 'Summary Button 2',
listeners: {
afterrender: function (btn) {
btn.tooltipHide = new Ext.ToolTip({
target: btn.getEl(),
anchorOffset: 0, // center the anchor on the tooltip
width: 300,
mouseOffset: [0, 25],
autoHide: false,
closable: false,
autoScroll: true,
html: '<span style="color: red;">This tooltip show by without css and removed anchor.<span>',
});
btn.el.on('mouseover', function (e) {
this.tooltipHide.show();
}, btn);
btn.el.on('mouseout', function (e) {
this.tooltipHide.hide();
}, btn);
}
}
}]
});
});
I am working on MVC Views.
I want a pop up window after adding portal details,'Portal details' pop up is not working
and also want to reload grid with data.
$("#addPortalDetails").dialog({
resizable: false,
autoOpen: true,
height: 140,
width: 300,
title:"Portal Details",
modal: true,
buttons: {
Ok: function () {
$(this).dialog("close");
//reload grid with data
}
}
});
Thanks in advance
To reload grid and and popup window the code is
$("#addPortalDetails").dialog({
resizable: false,
autoOpen: true,
height: 140,
width: 300,
title: "Portal Details",
modal: true,
dialogClass: "noclose",
buttons: {
Ok: function () {
$(this).dialog("close");
$("#your_grid_id").setGridParam({datatype:'json'}).trigger('reloadGrid', [{ page: 1 }]);
}
}
});
i have some problem with ie9 and jquery ui but still cant find solution please help me
When i click Detail dialog must be open and it works on ie7,ie8,FF,Chrome but don't in ie9
$(function() {
var popup = $("#popup"),
allFields = $([]).add(popup);
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
function dialogOpen(id) {
$('#dialog-form').dialog('open');
}
<div id="pageopen" onclick="dialogOpen('dialog-form')">
<div id="detail" style="text-decoration:underline;">Detail</div>
</div>
<div id="dialog-form" title="Detail"></div>
Add the following code in document.ready. You trying to open the dialog before it is being created.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
Following is my JS:
ShowHoverServerImageModalWindow: function () {
$("#divSettings").dialog({
width: 200,
height: 200,
modal: false,
title: "Server Image",
autoOpen: false,
closeOnEscape: true,
draggable: false,
resizeable: false,
/*position: "my position!!", */
buttons: [
{
text: "Close",
click: function () { $(this).dialog("close"); }
},
]
});
//Show the dialog
$("#divSettings").dialog('open');
},
I want the modal to be opened where my curser is at
How can i do that?
source: http://jqueryui.com/demos/dialog/ and http://docs.jquery.com/Tutorials:Mouse_Position
$("#divSettings").dialog({
... //your previous code
position: [e.pageX, e.pageY]
});
Easily found on google.
or just before you trigger the pop-up:
EDIT: now include the trigger.
$(document).click(function (e) {
$("#divSettings").dialog('option', 'position', [e.pageX, e.pageY]);
$("#divSettings").dialog('open');
});
I do get that we easily can set the Close button text to a variable, using closeText option
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel, // <-----
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
but how about a custom name?
this does not work :(
var btnResetMapping = 'Reset Mapping';
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
},
btnResetMapping: function() { // <-----
// logic here
},
}
});
This can be seen as weird question, but my variable, in the code is:
var btnResetMapping = '<%= Resources.PARbuttons.btnResetMapping %>';
witch is loaded correctly from the Global Resources file, with the correct sentence for the applied localization.
it works fine using:
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Close: function() {
$(this).dialog('close');
},
'<%= Resources.PARbuttons.btnResetMapping %>': function() { // <-----
// logic here
},
}
});
But I'm refactoring this as place the javascript file in it's own place (alone file), and I want to, not only do this way (separate HTML from Javascript - It's a Business Web Aplication that is always loaded from the INTRANET, never using Internet btw) but to understand it.
Thank you.
You can use bracket notation, like this:
var myButtons = { Close: function() { $(this).dialog('close'); } };
myButtons[btnResetMapping] = function() { ...logic here... };
$("#dialog").dialog({
autoOpen: false,
modal: true,
closeText: btnCancel,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: myButtons
});
Just make sure btnResetMapping is defined before this code runs and you're all set :)