react-modalx
Version:
React modal component
132 lines (118 loc) • 11 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link href="main.css" rel="stylesheet"/>
<script type="application/javascript" src="../node_modules/react/dist/react.js"></script>
<script type="application/javascript" src="../node_modules/react/dist/JSXTransformer.js"></script>
<script type="application/javascript" src="../dist/index.js"></script>
<script type="application/javascript" src="../dist/MyInnerComponent.js"></script>
<body>
<button onclick="javascript:Component.open()">Open</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur felis ac elementum aliquam. In nec pretium
mi. Sed efficitur libero a lorem imperdiet efficitur. Mauris orci leo, iaculis at dictum nec, blandit sed velit.
Phasellus ac libero a neque porta convallis. Phasellus gravida gravida mauris nec sollicitudin. Mauris aliquam erat
sem, in consectetur enim auctor a. Nam blandit eros vel ex egestas, quis iaculis sem auctor. Quisque quis ante
semper, blandit dolor finibus, pellentesque massa. Nulla eget fringilla tortor, et dapibus neque. Maecenas venenatis
egestas metus id dapibus.</p>
<p>Aliquam semper lobortis dolor, nec pharetra leo malesuada ac. Maecenas et eros a felis elementum lobortis quis id
lacus. Vestibulum tincidunt lacus sit amet mattis pulvinar. Sed efficitur, enim at cursus ullamcorper, ligula lacus
dapibus arcu, a iaculis tortor neque a ligula. Curabitur eget placerat augue, sed mattis nunc. Vestibulum non turpis
enim. Praesent nec est at mi mattis rutrum sed eget dui. Sed ultricies metus sit amet arcu pharetra, quis tempus
erat laoreet. Vivamus ultrices, enim quis ornare iaculis, lacus dui laoreet lectus, ac sagittis arcu neque nec quam.
Sed eget dictum nunc, sed viverra sem. Morbi elementum varius nibh, eu consectetur justo semper non. Duis
consectetur dignissim enim, sit amet maximus mi volutpat nec. Donec sit amet dui non mauris imperdiet vehicula.</p>
<div id="modal"></div>
<p>Aliquam porttitor diam consectetur metus consequat, sed placerat urna ornare. Integer ac lorem erat. Aliquam in porta
nisi. Mauris sit amet convallis lorem, ac consequat sem. Quisque ligula enim, dapibus id nulla non, congue dignissim
sem. Donec tristique magna ac tristique iaculis. Nullam viverra ex ac metus iaculis facilisis. Vestibulum ornare
turpis nec justo auctor tincidunt. Donec varius, lectus vitae consectetur blandit, justo purus sollicitudin justo,
ut viverra magna magna non neque. Aenean id urna quis purus rutrum commodo. Etiam consequat nisi a odio eleifend
ultricies. Sed varius pellentesque enim nec bibendum. Ut convallis, sapien in pellentesque maximus, felis metus
pretium mi, a placerat tellus tellus at lacus. Quisque quis enim nec nulla volutpat fringilla. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Proin imperdiet, lacus sit amet tristique dictum, dolor nisl lacinia lorem,
sit amet pharetra ex neque at justo.</p>
<p>Suspendisse potenti. Nam tempor elementum orci viverra tristique. Mauris eget lectus at velit accumsan euismod non
vehicula elit. Ut sit amet auctor ante. Quisque ac pulvinar libero. Etiam vitae placerat nisi, vitae hendrerit elit.
Vestibulum ex orci, euismod quis viverra sit amet, volutpat eleifend ex. Aenean auctor massa lorem, eget semper
purus consectetur in. Nam elementum purus at lectus malesuada malesuada. Cras imperdiet mi sed eros consectetur, vel
finibus quam ornare.</p>
<p>Cras ut lacus sapien. Integer vitae neque dui. Mauris ultrices lacinia dui, eu rutrum tortor. Nulla id ligula nibh.
Phasellus vel iaculis felis. Sed vitae dolor a purus tristique ultrices nec eget risus. Suspendisse sed porta arcu.
Suspendisse ut felis laoreet, eleifend ex ac, semper ex. In ullamcorper vehicula hendrerit. Vestibulum vel ex id est
commodo congue vel dictum eros. In hac habitasse platea dictumst. Aliquam luctus accumsan auctor. Praesent hendrerit
mi libero, sed malesuada nisi semper ut. Aliquam efficitur dictum nisl, ac blandit elit consectetur eget.</p>
<p>Aliquam porttitor diam consectetur metus consequat, sed placerat urna ornare. Integer ac lorem erat. Aliquam in porta
nisi. Mauris sit amet convallis lorem, ac consequat sem. Quisque ligula enim, dapibus id nulla non, congue dignissim
sem. Donec tristique magna ac tristique iaculis. Nullam viverra ex ac metus iaculis facilisis. Vestibulum ornare
turpis nec justo auctor tincidunt. Donec varius, lectus vitae consectetur blandit, justo purus sollicitudin justo,
ut viverra magna magna non neque. Aenean id urna quis purus rutrum commodo. Etiam consequat nisi a odio eleifend
ultricies. Sed varius pellentesque enim nec bibendum. Ut convallis, sapien in pellentesque maximus, felis metus
pretium mi, a placerat tellus tellus at lacus. Quisque quis enim nec nulla volutpat fringilla. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Proin imperdiet, lacus sit amet tristique dictum, dolor nisl lacinia lorem,
sit amet pharetra ex neque at justo.</p>
<p>Suspendisse potenti. Nam tempor elementum orci viverra tristique. Mauris eget lectus at velit accumsan euismod non
vehicula elit. Ut sit amet auctor ante. Quisque ac pulvinar libero. Etiam vitae placerat nisi, vitae hendrerit elit.
Vestibulum ex orci, euismod quis viverra sit amet, volutpat eleifend ex. Aenean auctor massa lorem, eget semper
purus consectetur in. Nam elementum purus at lectus malesuada malesuada. Cras imperdiet mi sed eros consectetur, vel
finibus quam ornare.</p>
<p>Cras ut lacus sapien. Integer vitae neque dui. Mauris ultrices lacinia dui, eu rutrum tortor. Nulla id ligula nibh.
Phasellus vel iaculis felis. Sed vitae dolor a purus tristique ultrices nec eget risus. Suspendisse sed porta arcu.
Suspendisse ut felis laoreet, eleifend ex ac, semper ex. In ullamcorper vehicula hendrerit. Vestibulum vel ex id est
commodo congue vel dictum eros. In hac habitasse platea dictumst. Aliquam luctus accumsan auctor. Praesent hendrerit
mi libero, sed malesuada nisi semper ut. Aliquam efficitur dictum nisl, ac blandit elit consectetur eget.</p>
<p>Aliquam porttitor diam consectetur metus consequat, sed placerat urna ornare. Integer ac lorem erat. Aliquam in porta
nisi. Mauris sit amet convallis lorem, ac consequat sem. Quisque ligula enim, dapibus id nulla non, congue dignissim
sem. Donec tristique magna ac tristique iaculis. Nullam viverra ex ac metus iaculis facilisis. Vestibulum ornare
turpis nec justo auctor tincidunt. Donec varius, lectus vitae consectetur blandit, justo purus sollicitudin justo,
ut viverra magna magna non neque. Aenean id urna quis purus rutrum commodo. Etiam consequat nisi a odio eleifend
ultricies. Sed varius pellentesque enim nec bibendum. Ut convallis, sapien in pellentesque maximus, felis metus
pretium mi, a placerat tellus tellus at lacus. Quisque quis enim nec nulla volutpat fringilla. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Proin imperdiet, lacus sit amet tristique dictum, dolor nisl lacinia lorem,
sit amet pharetra ex neque at justo.</p>
<p>Suspendisse potenti. Nam tempor elementum orci viverra tristique. Mauris eget lectus at velit accumsan euismod non
vehicula elit. Ut sit amet auctor ante. Quisque ac pulvinar libero. Etiam vitae placerat nisi, vitae hendrerit elit.
Vestibulum ex orci, euismod quis viverra sit amet, volutpat eleifend ex. Aenean auctor massa lorem, eget semper
purus consectetur in. Nam elementum purus at lectus malesuada malesuada. Cras imperdiet mi sed eros consectetur, vel
finibus quam ornare.</p>
<p>Cras ut lacus sapien. Integer vitae neque dui. Mauris ultrices lacinia dui, eu rutrum tortor. Nulla id ligula nibh.
Phasellus vel iaculis felis. Sed vitae dolor a purus tristique ultrices nec eget risus. Suspendisse sed porta arcu.
Suspendisse ut felis laoreet, eleifend ex ac, semper ex. In ullamcorper vehicula hendrerit. Vestibulum vel ex id est
commodo congue vel dictum eros. In hac habitasse platea dictumst. Aliquam luctus accumsan auctor. Praesent hendrerit
mi libero, sed malesuada nisi semper ut. Aliquam efficitur dictum nisl, ac blandit elit consectetur eget.</p>
<p>Aliquam porttitor diam consectetur metus consequat, sed placerat urna ornare. Integer ac lorem erat. Aliquam in porta
nisi. Mauris sit amet convallis lorem, ac consequat sem. Quisque ligula enim, dapibus id nulla non, congue dignissim
sem. Donec tristique magna ac tristique iaculis. Nullam viverra ex ac metus iaculis facilisis. Vestibulum ornare
turpis nec justo auctor tincidunt. Donec varius, lectus vitae consectetur blandit, justo purus sollicitudin justo,
ut viverra magna magna non neque. Aenean id urna quis purus rutrum commodo. Etiam consequat nisi a odio eleifend
ultricies. Sed varius pellentesque enim nec bibendum. Ut convallis, sapien in pellentesque maximus, felis metus
pretium mi, a placerat tellus tellus at lacus. Quisque quis enim nec nulla volutpat fringilla. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Proin imperdiet, lacus sit amet tristique dictum, dolor nisl lacinia lorem,
sit amet pharetra ex neque at justo.</p>
<p>Suspendisse potenti. Nam tempor elementum orci viverra tristique. Mauris eget lectus at velit accumsan euismod non
vehicula elit. Ut sit amet auctor ante. Quisque ac pulvinar libero. Etiam vitae placerat nisi, vitae hendrerit elit.
Vestibulum ex orci, euismod quis viverra sit amet, volutpat eleifend ex. Aenean auctor massa lorem, eget semper
purus consectetur in. Nam elementum purus at lectus malesuada malesuada. Cras imperdiet mi sed eros consectetur, vel
finibus quam ornare.</p>
<p>Cras ut lacus sapien. Integer vitae neque dui. Mauris ultrices lacinia dui, eu rutrum tortor. Nulla id ligula nibh.
Phasellus vel iaculis felis. Sed vitae dolor a purus tristique ultrices nec eget risus. Suspendisse sed porta arcu.
Suspendisse ut felis laoreet, eleifend ex ac, semper ex. In ullamcorper vehicula hendrerit. Vestibulum vel ex id est
commodo congue vel dictum eros. In hac habitasse platea dictumst. Aliquam luctus accumsan auctor. Praesent hendrerit
mi libero, sed malesuada nisi semper ut. Aliquam efficitur dictum nisl, ac blandit elit consectetur eget.</p>
<script type="text/jsx">
Component = React.render(
<Modal
title="Nice Modal Title" showTitle="true" titleTag="h4.awesome"
description={<p>And this is the awesome description</p>} showDescription="true" descriptionTag="div.description">
<label>
<span>Text-label</span>
<input type="text" placeholder="test"/>
</label>
<MyInnerComponent />
</Modal>
, document.getElementById("modal"));
</script>
</body>
</html>