js点击登录按钮的时候,弹出登录页面,点击登录框以外区域隐藏登录页面,点击登录框不隐藏登录页面

css代码:

.box2{
            position: fixed;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0,0,0,0.6);
            display: none;
}
.form{
            width: 300px;
            height: 300px;
            position: relative;
            top:50%;
            left: 50%;
            margin-left:-150px;
            margin-top:-150px;
            background: #1E9FFF;
}
.login {
            display: none;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
}

html代码:

<div class="box">
  <button type="button" class="btn">登录</button>
  <div class="box2">
    <form action="" method="post" class="form">
      <label>用户名:</label><br />
      <input type="text" name="" id="" value="" />
      <label>密码:</label><br />
      <input type="password" name="" id="" value="" />
      <input type="submit" value="登录" />
    </form>
    </div>
</div>

js代码:

<script>
  $('.btn').click(function(){
    $('.box2').toggle();
  })
  $('.box2').click(function(){
    $(this).toggle();
  })
  $('.form').click(function(event){
    $('.box2').css('display','block');
    event.stopPropagation();//阻止事件冒泡
  })
</script>

简单的写了一个,有需要的话可自行优化