@cocreate/modal
Version:
A draggable, movable and resizable modal. customizable via attributes, great for popups, alerts, multitasking and displaying multiple views.
385 lines (377 loc) • 15.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CoCreate-modal Documentation | CoCreateJS</title>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://cocreate.app/images/favicon.ico"
/>
<meta
name="description"
content="A draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views."
/>
<meta
name="keywords"
content="helper classes, utility classes, css framework, css library, inline style classes"
/>
<meta name="robots" content="index,follow" />
<meta
property="og:image"
content="https://cdn.cocreate.app/docs/modal.png"
/>
<link
rel="stylesheet"
href="../index.css"
array="files"
object="60888216117c640e7596303f"
key="src"
type="text/css"
save="true"
/>
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<!-- Navbar -->
<nav
class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
content_id="content"
scroll="sticky-nav,"
scroll-up="5"
scroll-down="5"
path="../"
src="../components/navbar.html"
></nav>
<sidenav
id="menuL"
class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
resizable
resize-selector="[content_id='content']"
resize-property="margin-left"
resize-value="width"
>
<menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
<div resize="right"></div>
</sidenav>
<main
class="padding-top:15px padding:15px@lg@xl"
content_id="content"
id="cocreate-modal"
>
<div
class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"
>
<div class="display:flex align-items:center">
<h2>CoCreate-modal</h2>
</div>
<div
class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"
>
<div
class="display:flex align-items:center transition:0.3s padding-left:10px"
share-network="true"
share-text="A draggable, customizable Pop up that toggle hiddent content via attributes. Great for multitasking and showing multiple views."
share-title="CoCreate-modal"
share-height="600"
share-width="700"
share-media="https://cdn.cocreate.app/docs/modal.png"
hover="display:block!important"
hover-selector=".social-networks"
>
<div class="display:none social-networks">
<a
class="margin-right:15px"
share-network="twitter"
title="Share on twitter"
><i src="/assets/svg/twitter.svg"></i
></a>
<a
class="margin-right:15px"
share-network="facebook"
title="Share on Facebook"
><i src="/assets/svg/facebook.svg"></i
></a>
<a
class="margin-right:15px"
share-network="instagram"
title="Share on instagram"
><i src="/assets/svg/instagram.svg"></i
></a>
</div>
<a
class="margin-right:15px"
share-network="share"
title="Share on share"
><i src="/assets/svg/share-alt.svg"></i
></a>
</div>
<a
href="https://github.com/CoCreate-app/CoCreate-modal"
target="_blank"
class="margin-right:15px"
><i src="/assets/svg/github.svg"></i
></a>
</div>
</div>
<h1
class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100"
>
A draggable, customizable Pop up that toggle hiddent content via
attributes. Great for multitasking and showing multiple views.
</h1>
<div id="xxxxx-section" class="display:flex flex-wrap:wrap">
<div
class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"
>
<div
id="modal-usage"
class="margin-top:80px border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#modal-usage-section"
>
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-selector="[href='#modal-usage']"
>
<h2 class="padding:5px_0px">Usage</h2>
<a class="margin-left:10px display:none" href="#modal-usage"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<div class="">
<p class="padding-top:15px">CoCreate-modal uses <a> tag.</p>
<p class="padding-top:15px">
When you click <a> tag, modal comes to the surface.
</p>
<div class="flex-grow:1 min-width:300px width:100%">
<pre>
<code class="language-html">
<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">
Show Modal On Page
</a>
</button>
</code>
</pre>
</div>
</div>
<div
id="modal-attributes"
class="margin-top:80px border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#modal-attributes-section"
>
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-selector="[href='#modal-attributes']"
>
<h2 class="padding:5px_0px">Attributes</h2>
<a class="margin-left:10px display:none" href="#modal-attributes"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<ul class="list-style-type:none">
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>target</span>
<span class="cocreate-badge success">string</span>
<span class="cocreate-badge danger">required</span>
</h4>
<p>Target must be "modal".</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>href</span>
<span class="cocreate-badge success">string</span>
<span class="cocreate-badge danger">required</span>
</h4>
<p>Href attribute indicates html file to set in modal.</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>modal-width</span>
<span class="cocreate-badge success">string</span>
<span class="cocreate-badge warning">optional</span>
</h4>
<p>Width of modal. Unit can be pixel or percent.</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>modal-height</span>
<span class="cocreate-badge success">string</span>
<span class="cocreate-badge warning">optional</span>
</h4>
<p>Height of modal. Unit can be pixel or percent.</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>modal-color</span>
<span class="cocreate-badge success">color</span>
<span class="cocreate-badge warning">optional</span>
</h4>
<p>Color of modal border.</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>modal-header</span>
<span class="cocreate-badge success">boolean</span>
<span class="cocreate-badge warning">optional</span>
</h4>
<p>Attribute whether to show header or not.</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>modal-x</span>
<span class="cocreate-badge success">string</span>
<span class="cocreate-badge warning">optional</span>
</h4>
<p>Position X of modal.</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>modal-y</span>
<span class="cocreate-badge success">string</span>
<span class="cocreate-badge warning">optional</span>
</h4>
<p>Position Y of modal.</p>
</li>
<li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
<h4>
<span>open_in</span>
<span class="cocreate-badge success">string</span>
<span class="cocreate-badge warning">optional</span>
</h4>
<p>
Attribute where to show modal in. "page" for current page.
"parent" for parent page. "root" for root page.
</p>
</li>
</ul>
</div>
<div
class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"
>
<!-- SandBox -->
<div
id="modal-demo"
class="border-bottom:1px_solid_lightgrey"
scroll
scroll-intersect="color:dodgerblue"
scroll-selector="#modal-demo-section"
>
<span
class="display:flex align-items:center width:fit-content"
hover="display:block!important"
hover-selector="[href='#modal-demo']"
>
<h2 class="padding:5px_0px">Demo</h2>
<a class="margin-left:10px display:none" href="#modal-demo"
><i src="/assets/svg/link.svg"></i
></a>
</span>
</div>
<div class="position:sticky top:0 padding:15px_0px height:100vh">
<!-- SandBox -->
<div
class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
id="playground"
>
<div
id="demo-code"
resizable
class="position:relative height:50%"
>
<textarea
type="code"
lang="html"
array="demos"
object=""
key="demo"
save="false"
id="demo"
class="height:100% width:100% outline:none border:none resize:none padding:5px"
></textarea>
<div resize="bottom" class="background:lightgrey"></div>
</div>
<div
id="demo-preview"
class="position:relative overflow:auto background-color:white"
>
<div class="demopreview padding:20px"></div>
</div>
<div
class="font-size:20px position:absolute top:10px right:10px opacity:0.6"
>
<a
class="margin-right:10px"
id="eye"
show="#eye-slash"
hide="#eye, #demo-preview"
toggle="code-height"
toggle-selector="#demo-code"
><i class="height:18px" src="/assets/svg/eye.svg"></i
></a>
<a
class="margin-right:10px"
hidden
id="eye-slash"
show="#eye, #demo-preview"
hide="#eye-slash"
toggle="code-height"
toggle-selector="#demo-code"
><i src="/assets/svg/eye-slash.svg"></i
></a>
<a
class="margin-right:10px"
id="code"
show="#code-slash"
hide="#code, #demo-code"
><i src="/assets/svg/code.svg"></i
></a>
<a
class="margin-right:10px"
hidden
id="code-slash"
show="#code, #demo-code"
hide="#code-slash"
><i class="height:18px" src="/assets/svg/code.svg"></i
></a>
<a
class="margin-right:5px"
fullscreen
fullscreen-selector="#playground"
></a>
</div>
</div>
<!-- End SandBox -->
</div>
</div>
</div>
<button
href="https://github.com/CoCreate-app/CoCreate-modal/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
target="_blank"
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)"
>
<i src="../assets/svg/pencil-alt.svg"></i>
</button>
</main>
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>