jquery.leanModal简单的弹窗插件鼠标点击按钮弹出html文本登陆框样式



388 1549 517



特效描述:简单弹窗插件 点击按钮弹出 文本登陆框样式,

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" media="all" href="style.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>

3. HTML代码

<div id="w">
	<div id="content">
		<h1>Welcome to the Site!</h1>
		<p>Just click the login link below to expand the modal window. This is only a demo so the input form will not load anything, but it is easy to connect into a backend system.</p>
		<center><a href="#loginmodal" class="flatbtn" id="modaltrigger">Modal Login</a></center>
	</div>
</div>
<div id="loginmodal" style="display:none;">
	<h1>User Login</h1>
	<form id="loginform" name="loginform" method="post" action="index.html">
		<label for="username">Username:</label>
		<input type="text" name="username" id="username" class="txtfield" tabindex="1" />
		<label for="password">Password:</label>
		<input type="password" name="password" id="password" class="txtfield" tabindex="2" />
		<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
	</form>
</div>
<script type="text/javascript">
$(function(){
	$('#loginform').submit(function(e){
		return false;
	});
	//弹出层调用语句
	$('#modaltrigger').leanModal({
		top:110,
		overlay:0.45,
		closeButton:".hidemodal"
	});
});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口提示框 切换按钮 form表单 提示框/弹出层 文本框 登录框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到