-1

カスタムポップアップの作り方。最も重要なことは、閉じるボタンがないことです

ここにコードの一部があります

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>");
4

1 に答える 1

0

bootstrapのような css/html テンプレート システムを調べることをお勧めします。ポップアップやアラートを行う方法の非常に優れたサンプルを提供しています。

また、フォームをサーバーに送信してさらに検証する前に、最初にJavaScriptでフォームデータを検証することをお勧めします（一意のユーザー名や電子メールアドレスなど）。

このようにして、JavaScript でブートストラップのようなテンプレートの呼び出しを開始できます。次のコードはコンパイルされません。アイデアを提供しているだけです

例: 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…&lt;/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>

例：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')
}
于 2012-09-27T21:03:02.307 に答える