Make a modal pop up instead of an alert on error

Question

0.00/5 (No votes)

See more:

I have googled for 2 days and am obviously not asking the question the correct way. I want to know how to make a jquery modal pop up instead of an alert when I enter a numeric value less than 25 in a text box that is minimum 25 order that tells the enduser "Minimum order 25." I can make the modal and I can make the alert but I can't figure out the code to connect the two. I am using jquery-ui. This seems like a simple thing to do and I am not a total newbie but I am not a real coder either. Grateful for any help.
Thanks,
Mike

Posted 16-Sep-15 5:45am

sadler56

Add a Solution

Comments

Wombaticus 16-Sep-15 12:04pm

There are a few articles here on CP about this - this one has a prety simple and configurable solution
http://www.codeproject.com/Articles/589445/JavaScript-Modal-Popup-Window
Unless you're suing jQuery-ui elsewhere, it's a bit sledgehammer-and-nut approach to this.

sadler56 16-Sep-15 15:13pm

the problem I have is that I don't know how to make the modal, which I already know how to make be triggered by an if statement if number is <=25. that is from invalid entry from a textbox. Minimum order is 25, if i enter 24 or less the modal pop up to remind enduser order must be 25 or more. Thanks so much for your help!!!!

Wombaticus 16-Sep-15 16:38pm

I'm not sure I understand your problem... but you say "I can make the modal and I can make the alert but I can't figure out the code to connect the two." I think maybe what you're looking for is to add an onblur event to your text box which calls your javascript function.
<input type="text" onblur="myfunction" />
and myfunction() will chekc if the imput is valid and popup the modla if not. (In .NET code you add this by (if you have an <asp:Textbox ID="txt1" runat="server" />)
txt1.Attributes.Add("onblur", "myfunction()")

sadler56 16-Sep-15 18:07pm

Yes, that's what I need. It's not asp just html and jquery. Thanks so much.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Code108 · Accepted Answer · 2015-09-16T06:24:00

You will have to create a div like this:

$('body').append('
                  <div id="modal_wrapper">
                    <!--[if IE 6]>
                      <iframe id="modal_iframe"></iframe>
                    <![endif]-->
                    <div id="modal_overlay"></div>
                    <div id="modal_window">
                      <div id="modal_bar">
                        Modal window
                        <a href="#" id="modal_close">Close</a>
                      </div>
                      <div id="modal_content"></div>
                  </div>
');

Then in a click function use it like:

$('myelement').click(function() {

$('#modal_wrapper').show(); //to make visible
$('#modal_wrapper').hide(); // to hide
}