在主页面弹出一个弹出层

最新推荐文章于 2022-10-14 15:40:59 发布

CahierX

最新推荐文章于 2022-10-14 15:40:59 发布

阅读量2.6k

点赞数 1

文章标签： jquery 弹出窗口 layer

首先需要在页面引入jQuery1.8以上的任意版本，并引入layer.js。

$('#BtnLogin').on('click', function() {

layer.open({

title: false,

type: 1,

area: ['397px'],

closeBtn: 0,

shadeClose: true, //点击遮罩关闭

content: '<div style="width:397px; background-color:#fcfcfc"> <form method="post" action="../UserInfo/login"><div><p align="center"> 账号 <input id="username" name="username" type="text" οnblur="ck()" /> </p> <div align="center"> 密码 <input id="password" name="password" type="password" /><br/><input type="button" οnclick="ckidpwd()" style="margin-top:15px;height:40px; width:170px;"class="layui-btn layui-btn-normal" value="登录"/><input type="submit" id="tjlogin" style="display: none" /></div> </form> <a id="qqLoginBtn"></a>'

});

</script>

content 内容

类型：String/DOM/Array

content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。

以上为部分参数，详细参数请查看官网:http://www.layui.com/doc/modules/layer.html

完整代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>layer弹出层</title>

</head>

<body>