layui做一个简单的弹出表单页面

Original 2019-04-04 23:50:05 310
abstract:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="static/layui/css/layui.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" href="static/layui/css/layui.css">

<script src="static/layui/layui.js"></script>

<style>

.container {

width: 400px;

border: 1px solid #ccc;

margin: 20px auto 0px;

padding: 20px;

}

</style>

</head>

<body>

<div class="container">

<form class="layui-form" action="">

<div class="layui-form-item">

<label class="layui-form-label">用户名</label>

<div class="layui-input-inline">

<input type="text" name="username" class="layui-input">

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">真实姓名</label>

<div class="layui-input-inline">

<input type="text" name="username" class="layui-input">

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">角色</label>

<div class="layui-input-inline">

<input type="text" name="username" class="layui-input">

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">状态</label>

<div class="layui-input-inline">

<select name="status" lay-verify="required">

<option value=""></option>

<option value="0">正常</option>

<option value="1">禁用</option>

</select>

</div>

</div>

<div class="layui-form-item">

<label class="layui-form-label">状态</label>

<div class="layui-input-block">

<input type="checkbox" name="" title="禁用" lay-skin="primary">

</div>

</div>

<button class="layui-btn">保存</button>

</form>

</div>

<script>

//Demo

layui.use('form', function(){

var form = layui.form;

});

</script>

</body>

</html>


Correcting teacher:西门大官人Correction time:2019-04-08 09:25:16
Teacher's summary:layui的弹出层使用的是layui.open方法,通过传入不同的参数,可以实现弹出各种不同样式的窗体

Release Notes

Popular Entries