@lrnwebcomponents/simple-modal
Version:
A simple modal that ensures accessibility and stack order context appropriately
67 lines (64 loc) • 3.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>SimpleModal: simple-modal Demo</title>
<script src="../../../node_modules/@lrnwebcomponents/deduping-fix/deduping-fix.js"></script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '../simple-modal.js';
import "../lib/simple-modal-template.js";
</script>
<style is="custom-style" include="demo-pages-shared-styles"></style>
</head>
<body>
<div id="somediv"><p>This is to illustrate the notion of some DIV being handed off to the modal but just a clone, not the real thing.</p></div>
<div class="vertical-section-container centered">
<h3>Basic simple-modal demo</h3>
<demo-snippet>
<template>
<style>
simple-modal-template[modal-id="smt1"] {
--simple-modal-resize: both;
--simple-modal-width: 300px;
--simple-modal-height: 300px;
--simple-modal-min-width: 300px;
--simple-modal-min-height: 300px;
}
simple-modal.wide {
--simple-modal-width: 75vw;
--simple-modal-height: 75vh;
--simple-modal-max-width: 90vw;
--simple-modal-max-height: 90vh;
}
</style>
<button controls="smt1">Button 1</button>
<simple-modal-template modal-id="smt1" title="simple-modal-template 1">
<div slot="header">Simple Modal 1 Header</div>
<p slot="content">Button 1 opens the first simple-modal-template template.</p>
<div slot="buttons"><button dialog-dismiss>Close Modal 1</button></div>
</simple-modal-template>
<button controls="smt2">Button 2</button>
<simple-modal-template modal-id="smt2" class="wide">
<p slot="precontent">Button 2 opens the second simple-modal-template template.</p>
<p slot="content">Button 2 opens the second simple-modal-template template.</p>
</simple-modal-template>
<button controls="smt3">Button 3</button>
<simple-modal-template>
<pre slot="custom">
Button 3 opens the custom simple-modal-template template. That is not wrapped in divs.
This is good for having even more control of content styling.
</pre>
</simple-modal-template>
<script>
document.querySelector('[modal-id="smt1"]').associateEvents(document.querySelector('[controls="smt1"]'));
document.querySelector('[modal-id="smt2"]').associateEvents(document.querySelector('[controls="smt2"]'));
document.querySelector('[modal-id="smt2"]').associateEvents(document.querySelector('[controls="smt3"]'));
</script>
</template>
</demo-snippet>
</div>
</body>
</html>