when i clicking a Button, i need to show a popup window , pop up window is opening , once opened , i need to do blur the back end page .
My script
function showDialogBox() {
$("#divSample").dialog({
autoOpen: false,
bgiframe: true,
Height: 500,
width: 500,
modal: false,
draggable: true,
resizable: false,
position: 'center',
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 500
}
});
$("#divSample").dialog("open");
}
Thank you
A simple solution is to change the opacity of the parent page - reduce it to, say, 0.3 when the dialog is open, return it to 1 when the dialog is closed. If you want to prevent clicks on the parent while the dialog is open, add pointer-events: none to the show function and pointer-events:auto to the hide/close function.
function showDialogBox() {
$('#parent_page').css({'opacity': 0.3, 'pointer-events': 'none'})
//rest of function
}
function hideDialogBox() {
$('#parent_page').css({'opacity': 1, 'pointer-events': 'auto'})
//rest of function
}
FIDDLE
Add this in your HTML
<div style="z-index:99" class="black_overlay1 off" id="black_overlay_loader"></div>
<div id="loader" class="off" > </div>
Add this in script(jquery)
function overlay(){
$("#loader").removeClass("off").addClass("on");
$("#black_overlay_loader").removeClass("off").addClass("on");
}
add this in your class
.black_overlay1{position: fixed;_position:absolute;top:0%;left:0%;width:100%;height: 100%;background:black;z-index:1001;-moz-opacity:0.3;opacity:.30;filter:alpha(opacity=30);
overflow: hidden}
.off{display:none}
.on{
/*empty*/
}
you can get black blur background.. then edit your css to get exact look you needed
Related
I have a case where I am using a jquery ui dialog and I have any html table in the dialog where the dialog is fixed height:
$("#modalDialogContainer").dialog({
resizable: false,
height: 700,
autoOpen: false,
width: 1050,
modal: true,
I call an AJAX query from a button click and I want to use jquery UI blockUI plugin to show a "loading" message. Something like this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
The issue I have is that the content in the dialog is longer than the height of the dialog
and I given the dialog is FIXED height so that causes the dialog to have a vertical scroll bar.
Having the scroll bar is fine (that's actually what I want) but the knock on effect is that
because of that depending if the user has scrolled down or not, the blockUI message is not centered (or even visible on the screen) vertically.
Question: Is there anyway I can detect what is visible areas inside a dialog that has a vertical scroll bar to vertically align the block message properly?
Above as you can see its hard coded to be 200px from the top so it works great if the user hasn't scrolled down but you can't see the message if the user has scrolled down the whole way
In short, if i am at the top of the scroll, then i would have this:
$("#myTableInsideDialog").block({
css: {
top: '200px',
bottom: "",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
if i am at the bottom of the scroll, then i would want this:
$("#myTableInsideDialog").block({
css: {
top: '',
bottom: "200px",
left: ''
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
I wouldn't alternate between top AND bottom properties:
For a window sized 1000px, top:800 == bottom:200
The important question, is how you can find out your scroll distance from the top. For that lets use a function:
function calcTopLocal() {
var s = $('#modalDialogContainer').scrollTop() + 'px';
return s;
}
Now, to apply it to your block:
$("#myTableInsideDialog").block({
css: {
top: calcTopLocal()
},
centerY: false, baseZ: 2000, message: $("#SavingMessage")
});
This can be refactored many ways. The significant detail is using scrollTop() and applying styling.
response to MKaama:
My proposed answer has no loops, no timers, and no suggestions of repeated action. There is no
Repeatedly calling a js function just to keep the position fixed is an overkill, a waste of CPU
If you want to add an loading message when the ajax is requesting the data, you can append a <div> on the dialog containing the message you want to display. Then you can apply a relative position to the dialog and an absolute position to the <div> and with margin:auto the div remains in the center of dialog always, even if you scroll the dialog.
jsFiddle demo
$("#modalDialogContainer").dialog({
resizable: true,
height: 300,
autoOpen: true,
width: 300,
modal: true,
buttons: {
'call ajax': function(){
// insert the loading div to the dialog
$(this).parent().append("<div class='loading' />");
$.ajax({
type: 'json',
url: 'jsonRequest.php',
complete: function(){
// remove the loading div
$('.loading').remove();
},
success: function(){
//do what you want
}
});
}
}
});
the CSS file should be something like this
#modalDialogContainer{
position: relative;
}
#myTableInsideDialog{
height: 1000px;
width: 100%;
}
.loading{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
...
}
there is a useful plugin that can tell if an element is visile on screen or not ( scrolled to ) , you may simply use it , the function returns true for visible areas on screen :
Here is a quick demo:
http://opensource.teamdf.com/visible/examples/demo-basic.html
Here is the source page :
http://www.teamdf.com/web/194/jquery-element-onscreen-visibility
usage as simple as:
$('#element').visible()
Use
$('#modalDialogContainer').scrollTop()
to find the amount of user's scroll.
You can then show your message with
{ top: $('#modalDialogContainer').scrollTop()+'px' }
And it will always be visible for them, and appear at the top of what they are looking at :)
Why bother with the height of the content at all?
I mean, isn't an easier solution to the problem possible by putting a "BlockUI" on the JQuery Dialog. Since you have a fixed height there, your block UI would most certainly be fixed as well. There is no way the scroll can now affect your message.
A crude example is hosted here in fiddle. It gives you both experiences so you can see how it behaves.
For example, you can put the block UI on the following class.
var container = ".ui-dialog";
$(container).block({
message: '<h1>Processing</h1>'
});
$.ajax({
url: "/echo/json/",
data: {
json: {},
delay: 5
}
}).done(function() {
console.log("Done with ajax");
$(container).unblock();
});
I'm using this javascript/jQuery to open a dialog, however when I scroll down on the page and open another window after closing the first one, the window will open at my selection position, plus the position I scrolled down. When I try to move it around, it will keep jumping down, causing a very annoying result.
function showDialog(url) {
dialogFrame = $('<iframe style="width:100% !important;" frameborder="0" id="Dialog" src="' + url + '" />').dialog({
autoOpen: true,
height: 500,
width: 1000,
title: 'myWindow',
resizable: false,
modal: true,
position: {
my: "center",
at: "center",
of: window
}
});
}
How can I prevent this behavior? It's probably the position : { } but what should it be?
I had the same issues with a jQuery UI dialog when the body had the CSS property position:relative;. You might want to check if that is the case.
In my case I could not remove the position:relative; so I decided to override the top value and use a fixed positioning:
$(".dialogFrame").dialog({
// ...
open: function(event, ui) {
$(event.target).parent().css('position', 'fixed');
$(event.target).parent().css('top', '20px');
}
// ...
});
The script could be optimized by calculating the effective center of the screen.
I have need to show this gallery as http://tympanus.net/Tutorials/ResponsiveImageGallery/ in fancy box. It works fine except one design problem that is fancybox doesn't come in the center for first time as it has to download few image for first time if one open the same album second time it then show correctly in the center as all image are cached. I tried to resolve this issue with following code but it is not work
I cant give fancybox fixed width and height as images are of different dimensions
$(".fancybox-frame").fancybox({
maxWidth: 740,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: true,
closeClick: true,
hideOnOverlayClick: true,
openEffect: 'none',
closeEffect: 'none',
onComplete: function () {
$.fancybox.resize();
$.fancybox.center();
}
});
Other solution i can think of is to call fancybox.center() and $.fancybox.center(); function when fancybox wrapper with changes fancybox-wrap.
This i can help me correctly repositioning the fancybox in center.
But i am not sure how to track height change for fancybox-wrap and call the reposition the fancy box.
Fancybox V 1.3.4
Help in this regarding is appreciated.
UPDATE:
Just to give you an idea i face similar problem that is happend on this link.
http://www.picssel.com/playground/jquery/getImageAjax.html
When you click for the first time it small fancy-box and doesn't re-size when image is downloaded. In my case i have to download multiple image and it take time to display the first image in between takes default value but doent resize when first image is download.
set autoSize to false in order to set width and height for fancybox. i.e.
$(".fancybox-frame").fancybox({
maxWidth: 740,
maxHeight: 600,
fitToView: false,
autoSize: false,
width: '70%',
height: '70%',
closeClick: true,
hideOnOverlayClick: true,
openEffect: 'none',
closeEffect: 'none',
onComplete: function () {
$.fancybox.resize();
$.fancybox.center();
}
});
Hope this helps you.
Dynamic Inline Content Loading
function loadAnswer(id){
jQuery.fancybox({
'content' : jQuery("#outerFAQ"+id).html(),
/*For Auto height and width*/
'onComplete' : function(){
jQuery('#fancybox-wrap').css({height:'auto',width:'auto'});
jQuery.fancybox.resize();
jQuery.fancybox.center();
}
});
}
/*Dynamically Set the id and passing it to function*/
<a class="fancybox" href="#" onClick="loadAnswer(<?php echo $data->getId()/*Dynamic id*/ ?>);"> Demo </a>
<div id="outerFAQ<?php echo $data->getId(); ?>" style="display:none;">
<div id="ans<?php echo $data->getId();?>">
demo
</div>
<div>
Single inline content loading
jQuery( "#demo" ).click(function() {
jQuery.fancybox({
'content' : jQuery("#demoContent").html(),
onComplete: function () {
/*Static height width*/
jQuery("#fancybox-content").css({
height:'500px',
overflow:'scroll',
});
jQuery("#fancybox-wrap").css("top","10");
jQuery(".fancybox-wrap").css("position", "absolute");
}
});
<a id="demo" href="#">Click me</a>
<div style="display: none">
<div id="demoContent">
demo
</div>
</div>
if you fancybox is already open and want to resize then below code will helps you.
$.ajax({
url: 'YOUR URL',
data:'DATA WANT TO TRANSFER',
type: 'post'
dataType: "text",
success:function(result){
//PLAY WITH RESULT SET
$.fancybox.toggle();
},
error:function(request,error){
alert("Error occured : "+error);
}
});
Reference from : Resize Fancybox
Solution, I managed to make it work by resizing after delay of 3 seconds by that time first image is downloaded completely
$(".fancybox-iframe").fancybox({
width: '70%',
height: '70%',
hideOnOverlayClick: true,
centerOnScroll:true,
onComplete : function(){
// $.fancybox.resize();
// $.fancybox.center();
var resize = setTimeout(function () {
$.fancybox.center();
}, 3000)
}
});
I believe more professional approach will be check using jquery when image is downloaded completely and then call $.fancybox.center(); function
Please if this is fine or we can do it some otherway.
Did you try to use <center></center> include of your fancybox? I think so it'll work on your page. and no need to use java, cause you are just trying to use it as center.
I created popup/modal window in JS, and I need to hide the outline map container. For init map I used this js code
self.mapDialogOptions = {
autoOpen: false,
modal: true,
draggable: false,
resizable: false,
height: 450,
width: 1050,
title: '',
dialogClass: '',
open: function () {
$(this).find('#map-close').on('click', function () {
$('#map-container').dialog('close');
self.isMapDialogVisible(false);
});
}
};
If I click on the popup (map) container appears outline
see screenshot
In your css file add:
#map-container {
border-style: none;
border-width: 0;
}
When you open a jquery poup its content is moved to the body, that why your popup become so large.
So after you opened the popup, you can move its content back to the original container.
Or you can adjust the map container paddings.
I am having a slight issue with Overlay (JQuery Tools) - what I need to do is allow people to click on another overlay from overlay.
The problem is that the overlay opens behind the already active overlay, which causes issues because I need it to load in front of the open overlay.
Does anyone know how I can load multiple overlay's but make sure the last overlay loads in-front?
This is the code I am using ...
/
/ select the overlay element - and "make it an overlay"
$("#overlay").overlay({
// custom top position
//top: 200,
// some mask tweaks suitable for facebox-looking dialogs
mask: {
// you might also consider a "transparent" color for the mask
color: '#fff',
// load mask a little faster
loadSpeed: 200,
// very transparent
opacity: 0.8
},
// disable this for modal dialog-type of overlays
closeOnClick: true,
// load it immediately after the construction
load: false,
oneInstance: false
});
// Modal on click
$("a[rel]").overlay({
// disable this for modal dialog-type of overlays
closeOnClick: true,
top: '3%',
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.8
},
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
},
oneInstance: false
});
I am using this to open the second overlay ..
Link
Thanks.
I had a similar problem and I solved it by setting the z-index property for all involved elements. Very important to realize here is that if you use a mask you need to set the z-index of that mask too!
For example:
$('#some_overlay_element').overlay({
mask: {
maskId: "defaultMask" ,
color: null ,
zIndex: 9001
},
effect: "apple",
zIndex: 9100
});
You can use this code to open multiply overlay, or overlay over overlay with different mask.
For Example:
//Global Variable//
var zindx=99999;
var mask_Zindex=99990;
//Code to open the Overlay//
$("yourDynamicID").overlay({
effect: 'apple',
oneInstance:false,
closeOnClick: false,
closeOnEsc: false,
zIndex: ++zindx,
api: true,
load: true,
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
},
onLoad: function(){
if($.mask.isLoaded()) {
//this is a second overlay, get old settings
oldMaskZ[counters] = $.mask.getConf().zIndex;
$oldMask[counters] = $.mask.getExposed();
$.mask.getConf().closeSpeed = 0;
$.mask.close();
counters++;
this.getOverlay().expose({
color: 'darkgrey',
zIndex: mask_Zindex,
closeOnClick: false,
closeOnEsc: false,
maskId: maskID,
loadSpeed: 0,
closeSpeed: 0
});
}else{
this.getOverlay().expose({
color: 'darkgrey',
zIndex: mask_Zindex,
maskId: maskID,
closeOnClick: false,
closeOnEsc: false
});
}
//Other onLoad functions
},
onClose: function(){
counters--;
// $.mask.close();
//re-expose previous overlay if there was one
if($oldMask[counters] == null){
$.mask.close();
}
}
});
I am having a different but similar problem and ran into the following potential solution:
http://sdevgame.wordpress.com/2011/01/26/modal-on-modal-with-jquery-tools/
I have not yet tried it.
Though this the question is not fresh - there may be some toolbox users out there with the same problem.
I'm using a very simple hack. Just wait for a milisecond allowing the overlay to be set up correctly then I'm changing the z-index. Simple as pie:
window.setTimeout(function(){
$("#YourSecondOverlayIdName").css("z-index", "11000");
},60);