how to create custom popup?

Question

how to make a custom popup. most importantly without the close button

here's a little bit of the code

if (empty($username) || empty($password) || empty($email) || empty($phone_no) ||empty($curr_state) || empty($curr_loc)){</br>
echo("<script> alert('Fill in details')</script>");
}
else{
if(strlen($password)>40){
    echo("<script> alert('Password is too long')</script>");
}
else{ 
$insert = 'INSERT INTO user(username , password , email , phone_number , curr_state , curr_loc) VALUES ( "'.$username.'", "'.$password.'" , "'.$email.'" , "'.$phone_no.'" , "'.$curr_state.'" , "'.$curr_loc.'" )';
mysql_query($insert);
echo("<script> alert('Registration Successful')</script>");

Your insert query is prone to [SQL injection](http://stackoverflow.com/q/332365/944681).. — Michal Klouda, Sep 27 '12 at 20:52
You could use a jquery plugin like Alok said or use jquery to popup your popup HTML element — ravi404, Sep 27 '12 at 21:00
@Alok don't you think it would be allot easier to do it yourself? — AlexP, Sep 27 '12 at 21:07
Just think how it works... One layer covers another. So now just make it. — Zaffy, Sep 27 '12 at 21:09

score 0 · Answer 1 · answered Sep 27 '12 at 21:03

I would suggest you look into a css/html template system like bootstrap. they offer really nice samples of how to do pop ups and alerts.

also, i'd suggest validating your form data first in javascript before sending the form to your server for further validation (like unique username or email address).

this way, in your javascript you can start calling templates like bootstrap. the following code won't compile i'm just giving you an idea

example: html

<form name="registration">
    <input type="text" name="username"/>
    <input type="submit" onclick="validateform()">register!</input>
</form>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>

example: js

function validateform() {
    var name = document.form.registration.username;
    //validate name...
    // if name is valid then submit with $.ajax
    // else call bootstrap modal like $('#myModal').modal('show')
}

yeah but you don't need to validate if username length is greater than 2 characters, or email address includes "@", or repeat password matches on the server side. this is why i wrote further validation on the server side in my original answer :) — Lin Qiu, Sep 27 '12 at 21:49
Javascript validation can be useful, but you just have to do validation on server side. — Zaffy, Sep 27 '12 at 21:51
come again.... me very noob in programming i'm only 2 months old in programming so u need to be a little bit more detail — serenna, Sep 28 '12 at 11:40

how to create custom popup?

1 Answers1