I would like to add (with as minimal change to a page as possible) the ability to display a pop-over (i.e. not an actual OS dialog, but part of the page) message box on my homepage that I can call with javascript.
In the worst case I suppose I could resort to the alert() call, but I find these annoying and obtrusive and just want something unobtrusive that will only affect the page.
Something like those pop-over picture boxes you see, but for text, maybe with a headline or something and a close box or 'OK' button.
I tried searching for it, but all I can find are tutorials on using javascript alert().
Update: I just found this question, which has some good links.
I've used this before: http://jquery.malsup.com/block/#demos
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.
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
I want to display an error message on my asp.net application. This message is a warning message, this is the way I did it:
CmdCalcInvoke.Attributes["onclick"] = "return confirm('Are you sure you want to calculate the certification? WARNING: If the quarter has not finished, all the partners status will change')";
The code above works fine. The CmdCalcInvoke is an htmlInputButton. This is the message that the message box displays;
Are you sure you want to calculate the certification? WARNING: If the quarter has not finished, all the partners status will change
What I want to do is to display this message, but wanted to highlight the WARNING word by making it bold, or displaying the word in red, can this be done???, can't remember seeing a message box with this characteristics, but I though i would ask in case
Any suggestions will be welcome
you can if you dont use the default alert boxes. Try using a javascript modal window which is just normal div markup that you can control the styling of. Look at blockui for jquery (there are loads of others)
You can try something like: http://weblogs.asp.net/johnkatsiotis/archive/2008/09/14/asp-net-messagebox-server-and-client.aspx
The modal dialog control I use is :
http://foohack.com/tests/vertical-align/dialog.html
http://foohack.com/2007/11/css-modal-dialog-that-works-right/
I find it works well across all browsers. I've hacked it round to work well with ASP .NET, and that was pretty easy.
It isn't possible to apply formatting to a standard dialogue box. However if you really want to format it you could flash up the message in HTML either next to the button or as a absolutely placed div, which you could format with CSS.
Else, use something like a LightBox based solution like Thickbox?