使用模態框進行登入
阿新 • • 發佈：2019-01-08
我們在瀏覽網頁時常常會遇到登入時候，網站並沒有跳轉到登入頁面而是彈出一個alert來用於登入。其實這個彈出視窗就是一個modal（模態框）（是指在使用者想要對對話方塊以外的應用程式進行操作時，必須首先對該對話方塊進行響應。如單擊【確定】或【取消】按鈕等將該對話方塊關閉）。在這裡我簡單介紹以下模態框使用以及登入的一些效果（提示：由於實現這種功能的方法很多，這裡簡單介紹用於使初學者有個基本瞭解，大神請繞過）
首先最簡單的方法就是使用框架（前端礦建框架有很多）
在這裡我使用bootstarp框架，因為這個框架最流行也比較簡單上手：
首先需要引入兩個框架：
以下是使用bootstarp實現模態框
<link rel="stylesheet" href="js/bootstrap.min.css"> <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>
以下是使用bootstarp實現模態框
<input type="submit" value="登入" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;"
data-toggle="modal" data-target="#mymodal">
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false"
>
<div class="modal-dialog" style="width:550px;" >
<div class="modal-content">
<!-- 模態框的頭 -->
<div class="modal-header" style="background-color:#C1FFC1;">
<button class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel" align="center">登入</h2>
</div>
<div class="modal-body" style="background-color:#C1FFC1;">
<!-- 以下是登入的form表單 -->
<form class="form-horizontal" role="form" name="f" action="login" method="POST">
<div class="form-group" id="div1">
<label for="firstname" class="col-sm-2 control-label">使用者名稱：</label>
<div class="col-sm-10" id="user">
<input type="text" class="form-control" id="name" placeholder="請輸入名字" style="width: 300" name="username"
class="tooltip-test"
data-toggle="tooltip" data-placement="bottom"
title="請輸入6——8位的字母或數字任意組合"
data-trigger="focus"
onblur="a()"
>
<label id="n" style="color: red;"></label>
</div>
</div>
<div class="form-group " id="div2">
<label for="lastname" class="col-sm-2 control-label">密 碼：</label>
<div class="col-sm-10" id="pd">
<input type="password" class="form-control" id="pwd" onblur="a()" placeholder="請輸入密碼" style="width: 300" name="password"
class="tooltip-test"
data-toggle="tooltip" data-placement="bottom"
title="請輸入6位密碼"
data-trigger="focus"
>
<label id="p" style="color: red;"></label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">請記住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" style="text-shadow: black 5px 3px 3px;" disabled="disabled" id="denglu">登入</button>
</div>
</div>
</form>
</div>
<div class="modal-footer" style="background-color:#C1FFC1;">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
</div>
</div> <script>
/* 頁面載入完執行此函式 */
$(function () {
/* 用於拖動div標籤 */
$( "#mymodal" ).draggable();
/* 啟用提示框 */
$('#identifier').tooltip(options)
});
function a(){
var username=$('#name').val();
var pwd=$('#pwd').val();
/* 判斷使用者名稱是否為空 */
if(username==""){
/* 使用jquery的animate實現視窗抖動 */
for(var i=0;i<3;i++){
$('#user').animate({left:"2px"},80);
$('#user').animate({left:""},80);
}
$("#div1").addClass("has-error");
$('#n').html("使用者名稱不能為空");
$('#denglu').attr("disabled","disabled");
}
else{
/* 使用jquery的addClass來動態新增標籤的class屬性 */
$("#div1").removeClass("has-error");
$("#div1").addClass("has-success");
$('#n').html(" ");
/* 判斷密碼是否為空 */
if(pwd==""){
for(var i=0;i<3;i++){
$('#pd').animate({left:"2px"},100);
$('#pd').animate({left:""},100);
}
$("#div2").addClass("has-error");
$('#p').html("密碼不能為空");
$('#denglu').attr("disabled","disabled");
}
else{
$("#div2").removeClass("has-error");
$("#div2").addClass("has-success");
$('#p').html(" ");
$('#denglu').attr("disabled",false);
}
}
}
</script>