coco-modal
Version:
90 lines (87 loc) • 2.46 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Modal</title>
<style>
body {
margin: 0;
padding: 0;
}
#button {
margin: 10px;
}
</style>
</head>
<body>
<div id="root">
<button id="button">登录</button>
<div id="login" style="display: none">
<div>
<input
id="username"
type="text"
class="coco-input"
placeholder="账号"
/>
</div>
<div>
<input
id="password"
type="password"
class="coco-input"
placeholder="密码"
/>
</div>
</div>
</div>
<script>
if (typeof Object.assign != 'function') {
Object.assign = function(target) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
};
}
</script>
<script src="./../coco-modal.js "></script>
<!-- <script src="https://unpkg.com/coco-modal/coco-modal.js "></script> -->
<script>;
var btn = document.body.querySelector("#button");
var username = document.body.querySelector("#username");
var password = document.body.querySelector("#password");
btn.addEventListener("click", function () {
coco({
title: "登录",
el: "#login",
okText: "提交",
}).onClose(function (ok, cc, done) {
if (ok) {
if (username.value.trim() !== "" && username.value.trim() !== "") {
done();
} else {
cc.setErrorText("输入不能为空！");
}
} else {
done();
}
});
});
</script>
</body>
</html>