<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<!-- Start your code here -->
<div style="width: 800px; margin: 100px auto; text-align: center">
<button onclick="insertImage()">Insert Image</button>
<br />
<br />
<button onclick="loginForm()">
Login
</button>
<div id="response"></div>
</div>
<!-- End your code here -->
<script src="./js/js-form-dialog.min.js"></script>
<script>
function insertImage() {
var v = JSDialog.init({
btn: "myBtn",
title: "Insert Image",
backdrop: "dismiss",
showClose: true,
fields: [
{
type: "text",
placeholder: "Enter image url here",
expand: "100%",
key: "url",
required: true
},
{
type: "number",
placeholder: "width",
expand: "50%",
key: "width",
required: false
},
{
type: "number",
placeholder: "height",
expand: "50%",
key: "height",
required: false
}
],
submitCallback: function(data) {
console.log(data);
var img = "<img />";
var src = "src='" + data.url + "'";
if (data.width) src = src + " width='" + data.width + "'";
if (data.height) src = src + " height='" + data.height + "'";
img = [img.slice(0, 5), src, img.slice(5)].join("");
document.getElementById("response").innerHTML = img;
},
closeCallback: function() {
console.log('Form closed');
}
}).show();
}
function loginForm() {
JSDialog.init({
title:'<div><img src="https://cdn.iconscout.com/icon/free/png-256/github-153-675523.png" width="100"/><br/><h4>Login</h4></div>',
titleCenter: true,
backdrop: "dismiss",
showClose: true,
width: "300px",
fields: [
{
type: "text",
placeholder: "Username",
expand: "100%",
key: "url",
required: true
},
{
type: "password",
placeholder: "Password",
expand: "100%",
key: "password",
required: true
}
],
submitCallback: function(data) {
console.log(data);
document.getElementById("response").innerHTML =
"<h2>Login successful</h2>";
},
closeCallback: function() {
console.log('Login form closed');
}
});
JSDialog.show();
}
</script>
</body>
</html>