Open a box not new window - javascript

I have a site with a number of small boxes. I have used a transition with CSS for each one to enlarge it when hovered over with mouse.
At the moment when you click it opens a new window but I have been asked for it to just open a box which sits over the top of the existing page rather than a new window. Is this possible?

Yes, I think what you want is a modal dialog. You could use jquery to achieve this. See https://jqueryui.com/dialog/

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.

Fancybox3 with iFrame - prevent close on overlay click

I am using Fancybox3 to open iframe in popup, but I need deny close on click on overlay, because in iframe is form, which user must fill out.
I tried edit outsideClick parameter 'close' to 'false' in fancybox.js and this guide too, but it's still closing on click on overlay.
Can somebody help me? Thanks.
Simply use clickSlide option. v3 works as a slider and is highly customizable (for example, you can resize and/or reposition sliding area), therefore there is a seperate options for clicking the slide and overlay element.

Appending dom object with attached events to new popup window causes events not to trigger

In my web application I show the user an overview of information in a system in different containers. Some of these containers can be nice to "pop out" into a separate window to allow the user to drag the window to a separate screen to get a better overview of the information(maps, schduler etc).
My problem occurs when trying to use the newly appended container in the newly created window. The html is there but the events are not working.
I have simplified my problem here: http://frankyboy.se/test/slider/test.html
What the page does is it imports jquery and jquery ui.
It initializes the jquery ui slider widget.
It then creates a new window when pressing a button, waits a second, then appends the slider to the new window.
The slider works in the original window but stops working in the new window.
Can anyone explain why and maybe how to fix this ?
UPDATE:
Ok it seems like at least the slider widget has problems running in a separate window. Maybe it is up to the plugin to support being able to be moved or initialized in a child window. My latest example shows two buttons, one opening up a new window and creating a slider and the other opening up a new window and creating a button. You can clearly see that the slider is dependent on the parent window since the slider will only move when you move the mouse in the parent window. http://frankyboy.se/test/slider/parent.html
To test the slider, click the first button, the slider appears in the child window. Click the slider, nothing will happen, move the mouse to the same position in the parent window and pretend there is an invisible slider there in the same position.
In your new window opened, you only append the container to the new document, but you have to call $("#test").slider(); again to let the slider to work.
updated working example

how to move to lightbox from another one?

How can we open another dive from light box. Actually we need to open lightbox at the time the present one should be closed.
here is the DEMO link
There are several problems with your code. All of your code simply targets .box, so there is no distinguishing which box you want to open anywhere. Note that both your links open the same box. Your "next" button and your "prev" button (the latter of which you'll never see) both just have the "close" class, there is not even an attempt to open any lightbox.

How to get this popup window style?

If you go to http://www.sharethis.com/ and click on the green shareThis widget next to the text 'Try it out', you'll see a window pop-up.
I've noticed everyone is beginning to use a pop-up window with this style.
What's this? Is it just a div or a new browser window? How to achieve this effect?
Check out any one of these:
Lightbox
Lightbox2
Fancybox
I guess the popup-window is actually two divs, one which darkens the site, one for the window.
Also guessing: both could use the "opacity" and "z-index" css attributes.

Categories