Question

如何制作自定义弹出窗口。最重要的是没有关闭按钮

这里有一点代码

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

Answer 1

我建议您查看像bootstrap这样的css / html模板系统。他们提供了如何做弹出窗口和警报的非常好的样本。

另外，我建议首先在javascript中验证您的表单数据，然后再将表单发送到您的服务器进行进一步验证（如唯一的用户名或电子邮件地址）。

这样，在你的javascript中你可以开始调用像bootstrap这样的模板。以下代码将无法编译我只是给你一个想法

示例：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>

示例：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')
}

如何创建自定义弹出窗口？

1 个答案: