我用谷歌搜索并学习了如何使用a tag
但按钮标签呢?
这是带有标记的代码
脚本,
<script>
$(function(){
$("#login_frame_btn").fancybox();
});
</script>
HTML,
<a class="modalbox" href="#login_frame" id="login_frame_btn">Login</a>
<!-- hidden inline form -->
<div id="login_frame" style="display: none">
<br/>
<input id="login_frame_email_input" placeholder=" E-mail" />
<br/>
<input id="login_frame_pw_input" placeholder=" PW"/>
<br/>
<img id="login_frame_login_btn" src="home_login_btn.gif" />
<br/>
<img id="login_frame_pwsearch_btn" src="home_pwsearch.gif" />
</div>
如何将其更改为按钮标记?
答案 0 :(得分:0)
我已经通过按钮为您创建了一个简单的模态登录,这里是 FIDDLE
<button id="login-btn">Log In</button>
<div id="login">
<span class="title">Log In</span>
<form id="login-form">
<input type="text" placeholder="E-mail" />
<input type="text" placeholder="Password" />
<button type="button" class="cancel-btn">Cancel</button>
<button type="button" class="login-btn">Log In</button>
</form>
</div>
#login-btn {
width: 100px;
height: 30px;
margin: 20px;
padding: 0 0 3px 0;
font-family: Verdana;
font-size: 18px;
letter-spacing: 1px;
}
#login {
background: #fff;
position: absolute;
display: none;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -100px;
width: 200px;
height: 150px;
padding: 10px;
z-index: 9999;
border-radius: 4px;
box-shadow: 0 0 10px 0 #333;
}
#login-form .title {
font-size: 24px;
font-weight: 600;
color: #0296cc;
}
#login-form input {
display: block;
width: 190px;
height: 25px;
margin: 10px 0;
padding: 0 3px;
letter-spacing: 1px;
border: 1px solid #ccc;
transition: all 0.2s ease-in;
}
#login-form input:focus {
border: 1px solid #0296cc;
outline: none;
box-shadow: 0 0 3px 0 #0296cc;
}
#login-form .login-btn,
#login-form .cancel-btn {
background: #0296cc;
width: 200px;
height: 30px;
font-family: Verdana;
font-size: 18px;
letter-spacing: 1px;
color: #fff;
border: none;
outline: none;
cursor: pointer;
transition: background 0.2s ease-in;
}
#login-form .login-btn:hover,
#login-form .cancel-btn:hover {
background: #006e96;
}
#login-form .login-btn {
float: right;
}
#mask {
background: rgba(60,60,60,0.3);
position: absolute;
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998;
}
$(function() {
$('#login-btn').on('click', function() {
if($('#mask').length < 1) {
$('body').append('<div id="mask"/>');
}
$('#mask, #login').fadeIn(650);
});
$(document).on('click','#mask, .cancel-btn', function() {
$('#mask, #login').fadeOut(650);
});
});