Question

我用谷歌搜索并学习了如何使用a tag

的fancybox弹出窗口

但按钮标签呢？

这是带有标记的代码

脚本，

<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>

如何将其更改为按钮标记？

Answer 1

我已经通过按钮为您创建了一个简单的模态登录，这里是 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);
  });

});

如何使用按钮标签的fancybox弹出窗口？

1 个答案: