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.
Related
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.
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.
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.
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/
I am trying to have a dynamic popup window in an html page. the popup will appear when the user hovers a word. and in the popup window i want to call a webpage with the hovered word as parameter. It does not need to work on every word in the page. Only hover on the words i select will work like that.
For example i have a text "hello this is a sample text" in my html page and the user hovers the mouse on the word "sample" a popup will appear and in the popup i will show the following page "www.blabla.com/?word=sample"
hope i was clear.
I want it to be able to work on a static page. I am very new to javascript. I am not even sure where to start so any help would be appreciated.
Thanks.
edit: i want the popup to be a modal popup.
That is very basic, read tutorials on http://www.tizag.com/javascriptT/javascriptevents.php and http://www.w3schools.com/jsref/met_win_open.asp
But I can tell you, that with this sort of method, browsers will trigger their pop up blocker.
Get the elements you want to have this effect, loop over them, add event listeners to each of them which pops a window up.
This is a crude implementation of something like this, where the words have the class popup around them:
[].slice.apply(document.getElementsByClassName('popup')).forEach(function (elem){
elem.addEventListener('mouseover', function (){
window.open('http://google.com/?q=' + this.innerHTML);
}, false);
});
Demo