QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 表單代碼 > jQuery bootstrap模態登錄框插件

手表的分布图: jQuery bootstrap模態登錄框插件

基于bootstrap.js制作簡潔模態登錄框,點擊按鈕彈出登錄框表單,輸入賬號,密碼效果。這是一款響應式的彈窗登錄框插件。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

2、head引入js文件

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

3、body引入HTML代碼

<div class="modal fade" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
					  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
			</div>
			<div class="modal-body">
					<h4 class="modal-title" align="center">登錄框</h4>
					<br/>
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="name" class="col-sm-offset-2 col-sm-2 control-label">賬號</label>
							<div class="col-sm-5">
								<input type="text" class="form-control" id="name" placeholder="請輸您的入賬號">
							</div>
						</div>
						<div class="form-group">
							<label for="password" class="col-sm-offset-2 col-sm-2 control-label">密碼</label>
							<div class="col-sm-5">
								<input type="password" class="form-control" id="password" placeholder="請輸入您的密碼">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-4 col-sm-5">
								<button id="submitBtn" type="submit" class="btn btn-default btn-block btn-primary">登陸</button>
							</div>
						</div>
						</form>
			</div>
			<div class="modal-footer">
			</div>
		</div>
		<!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
$(function(){

	$(".tbox").click(function(){
		$('#myModal').modal('show') //顯示模態框
	})
	
});
</script>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了