I have creating a page where i need to show a div in a popup. I have searched around and only found window.open, that i personally hate, as its a really ugly solution, and causes crosss browser broblems. I have seen floating popups on the web, with a black cross in the right upper hand corner. I think you must create a div, and the JS script will pick up .the div and show it in the floating window. I have searched around alot but could not find a solution. I using Tapestry 5.3.6 . Can anyone show me how to do this..?
From your description it sounds as though you might be looking for FancyBox:
http://fancybox.net/
There are a lot of tutorials on how to use these JavaScript based overlay type pop-up windows. The FancyBox homepage shows quite a few examples.
There are lots of javascript solutions for this.
Start by looking at
Jquery UI
What you want is called a modal window or dialog
Thickbox
Colorbox
Jquery Light Box
Try this jquery lightbox plugin i think this is what you want...Hope it helps...
Related
I do apologize for the title if it is inaccurate. (feel free to offer me suggestions on the proper wording if needed.)
My question is for my web page, I would like to do something where you click on a link (or image), and instead of opening a new tab or browser window, you get a box that hovers over your page displaying the image of the link (or smaller image you clicked on). I am not sure if the correct term for this is a pop-up or pop-over window.
The best example of what I would like to do, is if you were to go to amazon.com and you see a product and it says "click here for a larger image". when you do that, a sort of window will display itself over the current page and show you the larger image.
Would anyone be able to give an example of code to see how this would be done as well? I am very thankful for any and all recommendations.
You could use a solution like fancybox, I believe this is what are you looking for http://fancybox.net
If I've understood what you mean, there are tons of jquery plugins to do that, for example http://lokeshdhakar.com/projects/lightbox2/
Here is a link, he has an explanation and code snippets for ya, works great.
http://www.htmlgoodies.com/beyond/javascript/article.php/3881276
I built a form for my website that opens inside a highslide popup, and this form has multiple steps. However, some steps are longer than others and have more text. Is there a way to have the highslide window automatically resize itself to the exact height of the content when it's done loading?
I've been looking, and I've seen people recommend hs.reflow or hs.resizeTo, but I have been unable to get either of them to work properly.
Huzzah, seems as though I have stumbled on the solution. Simply add parent.window.hs.getExpander().reflow(); to the highslide popup, and remove any definition of height concerning the popup.
How can I make this lightbox effect that they use on this website http://www.usatoday.com that when you click on a thumbnail the page loads in with that lightbox pop-over the content effect.
But the thing is it's not just a simple lightbox plugin because the link changes into the post link in the address bar.
I've looked around and all I could find are these: http://www.jacklmoore.com/colorbox/ and http://fancybox.net/
but they are not really what I am looking for, since I really need the link to change in the address bar.
If anybody knows of a simple way to achieve this, please help me out :)
Thanks
This may be helpful for creating light box using jquery.
http://www.tonylea.com/2011/how-to-create-your-own-jquery-lightbox/
I am working on a project where it would be easier for users to quickly add transactions.
I am very much interested to do something similar to what gmail compose pop up does on the single page
I have no idea how to implement such a thing. Please give me directions about how to do such things
I am interested in building it using AngularJS
P.S Sorry for a broad question, but I really don't know what this is called and don't know what to Google for either
You can construct a popup like that very easily using a regular div element and some CSS. In particular, the position: fixed CSS property will let you put something at a position on the window, no matter how it scrolls.
Here is a simple JSFiddle that demonstrates the technique: http://jsfiddle.net/BinaryMuse/ndr2Q/
You can click the titles of the books to expand their description, which will hopefully make the preview window tall enough to scroll. (If not, just resize the window.) No matter where in the document you scroll, the "popup" window (which is just a regular element with an ng-show and some CSS) stays at the bottom-right of the screen.
You can find libraries, like Bootstrap, that present jQuery plugins to allow you to do popups on the page, but in general they're designed to prevent the user from interacting with the page behind the modal in any useful way. A technique like this allows you to scroll around and use the page in the background similar to Gmail's interface.
Dockmodal is a Gmail like dockable modal plugin that has the option to minimize and restore opened modal dialogs.
Check out these angular JS alerts based on bootstrap:
http://mgcrea.github.io/angular-strap/#/alerts
You can use the provided $modal service that takes a template URL as well :
var modal = $modal({template: '/js/app/views/elements/modal-welcome.html', show: true, backdrop: 'static'});
And shows it up as a popup.
I realise that to most this is perhaps a very simple query, but I'm relatively new to working with the design elements of an HTML form, so please bear with me.
I'm using this form to allow the user to upload image files.
What I'd like to be able to do, is change the form to a pop window that appears in the centre of the page, but after reading many tutorials, I must admit to being non the wiser. I just wondered whether someone could perhaps please show me what I'd need to do to create this.
I'd also wondered whether it would be possible if someone could perhaps help me out a little please on the 'close form' function. I've added the 'close' functionality to my form, but it appears as a hyperlink, with a 'Warning Message' dialog box appearing upon selection. I'd like, if possible, for this to appear as normal text and without the 'Warning message'.
Any help would truly be appreciated.
Many thanks and Kind regards
I would recommend looking into a jquery lightbox type solution. Using javascript the way you are the warnings and possible blocking of your popup could occur. Here is a simple window.open article that will get your window opened
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
Here is an article to close the window without getting a prompt:
How can I close a browser window without receiving the "Do you want to close this window" prompt?enter link description here
I would recomment JQuery Dialogue. It's easy to implement even for a novice JQuery/Javascript developer