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.
Related
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
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'm working with js, jQuery library, in a Liferay Portal webpage and when I popup a content the content information protrudes the window.
What I should do if I want a scrollbar to set the content inside the popup?¿
Here is my code...
function showpopup(id) {
AUI().ready('aui-dialog','aui-dialog-iframe','liferay-portlet-url', function(A) {
var url = Liferay.PortletURL.createRenderURL();
url.setPortletId("56"); // "Web Content Display" portlet ID
url.setWindowState('pop_up');
url.setParameter("_56_groupId", Liferay.ThemeDisplay.getScopeGroupIdOrLiveGroupId());
url.setParameter("_56_articleId", id); // webcontent ID
window.myDialog = new A.Dialog(
{
title: 'Web Content',
height: 960,
width: 1024,
modal:true,
centered: true,
}
).plug(
A.Plugin.DialogIframe,
{
uri: url.toString(),
iframeCssClass: 'dialog-iframe'
}
).render();
});
}
And image with the problem..
add this to your css file:
.dialog-iframe{
overflow-y: scroll;
}
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);