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

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

我建议你寻找到一个CSS/HTML模板系统，如bootstrap。他们提供了如何做弹出窗口和警报的非常好的示例。

另外，我建议在将表单发送到服务器进行进一步验证（如独特的用户名或电子邮件地址）之前，首先在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') 
}