pop-up div over parent window - javascript

How can i populate a div over parent window and parent window must be disable unless until pop-up Div/ html page closes.
Parent Window disable means not able to work on. Once the child div populated over parent div then you are only allowed to continue on this populated div/ html page.

1) Have a div that takes over all your monitor. Display by default to none, and z-index 1 (it also needs position absolute)
2) Have the popup div again position absolute, and display to none. z-index 2
3) Onclick change the display for those two. As long as div 1 is visible and it takes over all the monitor, you won't be able to do anything. Only div 2 will be accessible as it is over div 1 in z direction.

Like the jQuery UI modal dialog? If you use the jQuery UI library, all it takes is a simple function:
$('#foo').dialog()

Impossible to do reliably, users can circumvent it. You can simulate a modal dialog, but on the client anything goes. Whatever this dialog is supposed to prevent, your server and in-page logic must expect that it may not have done the job.

Related

Make pop-up or dialog window with list of photos

I want to make dialog/pop-up window with list of photos(currently I`m trying to so it with smartPhoto.js, but there is some issues). That photos should become bigger, when clicking on that.
Do you have any ideas how to implement that? Any help appreciates
start off with a placeholder div inside a new page window.
style the div so it has display:none, and takes up most of the screen. you can even give it a transparent black background, and you can say that when you click on a link or a thumbnail, that div will appear and you can put your photo with javascript through the onclick event on that div.
make sure you change the z-index of the div aswell.
finally since this is all happening inside a popup window, you just need a link with target=_blank to display the contents of your page in a popup.

Fancybox 3 metod to scroll down fancy popup

I need some method to scroll Fancybox popup down or scroll to element which is in the popup (when the poopup opened obviosly)
I red the documenmtation buut did not find the way.
Many thanks.
There is no such built-in method and you can simply use plain JavaScript (or jQuery) to scroll your element wherever you want. Maybe you can simply trigger focus on your element and the browser will do the rest.

TAB navigation to flow through stacked layers in a webpage (z-index)

On click of an input field, a projected popup window opens (have used z-index).
Now when i press TAB, i want the focus to automatically move from background screen to the popped up window.
Is it possible to achieve this flow of TAB navigation through built in properties or styling ?
NOTE 1: I tried setting focus to the outer div of the popup programatically.
So that the focus is moved from background to popup.
But it fails in IE11 and IE10 because, the cursor remains in one element and the focus remains in another element when navigation passes through an empty field. I DONOT WANT HELP FROM COMMUNITY MEMBERS TO DEBUG THIS CODE.
NOTE 2: I won't be able to set the tabindex for the popup window elements statically. Because in that case, the TAB moves to those elements even when the popup window is not visible.

Disable scroll in body - ExtJS

I have a app where there is list which loading by scroll, and I have modal window, when I open window I still can load list, but this is error. How can I disable scroll in parent window (body) ? I know about overflow: hidden for body, but maybe there is special option in Ext.window.Window in order to disable scroll.
Thanks.
I think you will have same issue with all ui controls under modal dialog. You can add transparent div to feel all background and display modal dialog in front of this div. In this case all ui controls in the back of dialog will not be accessible for user.
When initialising your Ext.window.Window you can add param modal: true which will add an overlay to the background which may prevent user scrolling. Otherwise it will be a manual process of setting overflow:hidden on the body when your window is shown.
Source: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.window.Window

jqm collapsible set causing problems within popup in firefox

I have a jquery mobile popup, which has a collapsible set within it, and the popup has overflow-y = auto.
SCENARIO A
When I open the popup (which builds content in real-time (when the open-popup button is pressed)), then I open one of the collapsibles within, then click anywhere within the popup, the popup content automatically scrolls.
SCENARIO B
If I then close the popup (which includes an .empty() to clear out that dynamically built content), and then repeat scenario A, the problem does not occur.
SCENARIO C
If I open the popup, but do NOT open any of the collapsibles, I can click anywhere without the problem occurring.
I created a fiddle, but it Does Not replicate the problem.
Any ideas?
EDIT
SCENARIO D
If I do not declare the content divs to be data-role='collapsible-set/collapsible', but rather just drop the content into normal divs, then I do not have the strange scroll artifacts.

Categories