简易模态框代码

最新推荐文章于 2023-10-25 11:45:37 发布

原创最新推荐文章于 2023-10-25 11:45:37 发布 · 365 阅读

1 ·

CC 4.0 BY-SA版权

jsp 专栏收录该内容

17 篇文章

订阅专栏

<b>点我出现登录模态框</b>
<div class="alert-box">
    <div class="alert">
        <p><input type="text" placeholder="请输入用户名" value="admin"></p>
        <p><input type="password" placeholder="请输入密码"></p>
        <button>登录</button>
    </div>
</div>

body {
	height:1200px;
}
.alert-box {
	display:table;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:9999;
	background:rgba(0,0,0,0.5);
}
.alert {
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}
.alert input {
	width:200px;
	height:30px;
	line-height:30px;
}
b {
	font-size:30px;
	color:#FF8400;
	cursor:pointer;
}
button {
	cursor:pointer;
}

$('.alert-box').hide();
$('b').on('click', function() {
    $('.alert-box').fadeIn();
});
$('button').on('click', function() {
    $('.alert-box').fadeOut();
    $('b').html('登录成功');
});