I'm trying to create a website and I've been trying to create something which will open new content when clicked on, somewhat like Facebook has on the pictures: You click, Get a window with the picture and text area for commenting. I'm specifically trying to avoid popups because I don't find them very neat.
Does anybody know how i could create this/ have any tutorials? Is this extremely complex?
Have a look at jquery ui:
http://jqueryui.com/demos/dialog/
You can not avoid a popup. The only difference is that using a javascript framework like jquery you can have a beautiful popup.
So use the jquery dialog box to display the image and textbox for commenting. Using ajax you can save the comment and exit the dialog box. The trick is to make good use of css and opacity on the dialog box.
Related
It shows me a simple Alert Box when I use this
<button onclick="alert('AlertBox')">Click Me</button>
But is their any way to have an alert box, with extra bg color and some extra effect look?
use Sweet Alert
Or Make div with fixed position display none, and in javascript when you click on botton change div display to block
Here is the detailed example of Designed Alert Box with help of Sweet Alerts
http://javainfinite.com/html/custom-designed-alerts/
The javascript alert() is a system message box that will will block your page whilst it displays and will look different on different operating systems.
What you are looking for is usually referred to as a dialog box or modal popup, these are constructed using html and javascript to look like the page behind is blocked or greyed out.
If you are starting out, you could look at some examples like:
https://www.w3schools.com/howto/howto_css_modals.asp
These are build from scratch.
Or you could look at using a css librarly like BootStrap which will have these components and other components to help style your website or application.
eg: https://getbootstrap.com/docs/4.3/components/modal/
I have a jquery/javascript question. For a site I am working on in PHP/JQuery I have the need to create a dialogue box with an ok/cancel button and a message and then submit a form based on if the user says ok or not. I know in javascript I can create a new window that links to a styled page and then I can do a select for if the user hits the ok button and submit the windows parent form using that but the last time I coded something similar to it I felt like it took a lot of lines of code and was wondering if JQuery supported dialogue box creation and if I could do some similar functionality using it (with hopefully less lines of code since everytime I use jquery instead of standard javascript it seems like it really reduces my codebase). If anyone knows of a resource to learn how to do this I would appreciate a link or a second of your time for some pointers.
Thanks!
I think you are looking for something along the lines of the jquery ui dialog.
How do show pop up help messages in jquery?
I.e You might want to let the user know about a new feature, or might want to provide the user with help on how to use a feature.
Your best bet to get started would be the jQuery Dialog which is part of jQuery UI. That can give you basic message abilities
You could use a popup lightbox plugin, there are plenty available, but I'd recommend FancyBox because it's flexible, easy to use, and looks quite professional. You can them to display any content, including simple text, buttons, forms, iframes and images.
Have a div element hidden. Position is absolute, z-index to something greater than 0 (css).
Onclick on some button or something, have javascript change the display of this element to block.
I want to put a link in a Javascript alert.
Is this possible? (I've searching for a solution, but I keep getting things about links that fire alerts!)
AFAIK you can't do that with a normal javascript alert box.
Make a custom alert box and then make a link inside it.
Here is a nice one
YUI: Dialog Alert Widget
Also a jQuery based one
jQuery Impromptu
Nope. Only standard OS dialog boxes are available (alert, input, etc.), and none support embedded hyperlinks.
You can could a pop-up window that is styled to look like a dialog, but pop-up windows are likely to have various user blocks, etc. in place.
My advice is to use a an absolutely-positioned DIV with a high z-order centered on your page that looks like a dialog box and put whatever you want in it. Various UI toolkits like JQuery UI take the pain out of this.
I'm interested in alert boxes such as,
http://www.visual-blast.com/javascript/nice-alert-box-with-jquery-impromptu/
and
http://woork.blogspot.com/2008/08/design-stunning-alert-box-using.html
but with a different functionality, the user should be able to interact with the page even with the alert box present, so it needs to be movable and not obscure the underlying page, as in this example,
http://www.open-lab.com/mb.ideas/index.html
Alert box should be generated automatically on page view plus the title and message of the alert box should change with each page refresh from expandable library.
Is there anything out there like this?
Thanks
Sounds like the jQuery UI dialog widget might do what you need?
http://jqueryui.com/demos/dialog/
Here is an example with mootools. You easily can extend any element on the page to be draggable. You may use this plugin as a sample of alerts and you'll just need to remove some functionality and add make it draggable.
There are few custom dialogs in moo.rd. One of them is the Custom.Alert:
http://www.moord.it/examples/custom_alert