@cocreate/modal
Version:
A draggable, movable and resizable modal. customizable via attributes, great for popups, alerts, multitasking and displaying multiple views.
112 lines (104 loc) • 3.55 kB
HTML
<html lang="en">
<head>
<title>Modal | CoCreateJS</title>
<!-- CoCreate Favicon -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<!-- CoCreate CSS CDN -->
<link
rel="stylesheet"
href="https://cdn.cocreate.app/modal/latest/CoCreate-modal.min.css"
type="text/css" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<div class="display:flex">
<button>
<a
actions="state, openModal"
modal-src="https://server.cocreate.app/CoCreate-adminUI/module_datatable.html"
modal-width="520px"
modal-height="100%"
modal-color="#229954"
modal-header="false"
modal-x="0px"
modal-y="0px"
data-open_in="page">
Page-1
</a>
</button>
<button>
<a
actions="state, openModal"
modal-src="test2.html"
modal-width="320px"
modal-height="100%"
modal-color="#229954"
modal-header="true"
modal-x="0px"
modal-y="0px"
data-open_in="page"
>Page-2</a
>
</button>
<button>
<a
actions="state, openModal"
modal-src="test.html"
modal-width="320px"
modal-height="100%"
modal-color="#229954"
modal-header="true"
data-open_in="parent"
modal-x="0px"
modal-y="0px"
>Parent</a
>
</button>
<button>
<a
actions="state, openModal"
modal-src="test.html"
modal-width="320px"
modal-height="100%"
modal-color="#229954"
modal-header="true"
data-open_in="root"
modal-x="0px"
modal-y="0px"
>Root</a
>
</button>
<button>
<a
actions="state, openModal"
modal-src="test.html"
modal-width="320px"
modal-height="100%"
modal-color="#229954"
modal-header="false"
data-open_in="12345"
modal-x="0px"
modal-y="0px"
>PageID-12345</a
>
</button>
</div>
<div class>
<h2>Test 1</h2>
<h5 id="page-parent"></h5>
<h6 id="page-page"></h6>
</div>
<div
class="margin-0 vh-100"
id="modal-viewport"
data-ghost-class="modal-ghost"></div>
<!--</div>-->
<!-- CoCreate JS CDN -->
<script src="https://cdn.cocreate.app/modal/latest/CoCreate-modal.min.js"></script>
</body>
</html>