metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
35 lines (31 loc) • 2.82 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<title>Test dialog - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
<div class="container">
<h1>Dialog test page</h1>
<button class="button" onclick="OpenDialog()">Load dialog</button>
<div data-role="dialog"
data-overlay="true"
data-default-action="false"
data-close-button="true"
data-overlay-click-close="true"
id="IdDialog"
class="dialog"></div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
function OpenDialog() {
var dialog = Metro.getPlugin('#IdDialog', 'dialog');
dialog.setTitle('My Dialog Title');
dialog.setContent('<form id="Form" data-role="validator" data-on-validate-form="AddForm()" action="javascript:"><div class="row mb-2"><div class="cell-md-6"> <input type="text" name="x" id="x" data-role="input" data-prepend="x:" value=""></div><div class="cell-md-2"><a class="button my-button-colors w-100" style="cursor: pointer; color: white;" onclick=""><span class="mif-user-plus"></span><span class="actionButton"> Select</span></a></div><div class="cell-md-4"><select data-role="select" id="y" name="y" data-prepend="y:"><option selected value="Initial">Initial</option><option value="Renewal">Renewal</option></select> </div></div><div class="row mb-2"><div class="cell-md-4"> <select data-role="select" id="z" name="z" data-prepend="z:"><option selected value="m">m</option></select></div><div class="cell-md-4"> <select data-role="select" id="a" name="a" data-prepend="a:"><option selected value="Job Requirement">Job Requirement</option></select></div><div class="cell-md-4"><input data-prepend="Date:" id="date" name="date" value="" data-role="calendarpicker" data-cls-calendar="compact" data-input-format="%d/%m/%y"></div></div><div class="row mb-2"><div class="cell-md-12"><textarea data-role="textarea" data-prepend="Text1:" name="Text1" id="Text1" autocomplete="off" value=""></textarea></div></div><div class="row mb-2"><div class="cell-md-12"><textarea data-role="textarea" data-prepend="Text2:" name="Text2" id="Text2" autocomplete="off" value=""></textarea></div></div><div class="row"><div class="row mt-2 mb-2"><div class="dialog-actions p-0 d-flex flex-justify-start"><div><button id="Save" class="button my-control-colors"><span class="mif-floppy-disk"> Save</span></button></div><div><span class="mif-spinner4 ani-spin"></span></div> </div></div></div></form>');
dialog.open();
}
</script>
</body>
</html>