susmodal
Version:
Simple library for displaying modals
77 lines (64 loc) • 3.64 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.0">
<title>Creation of library</title>
<!--
-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.1/css/bulma.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="src/modal.min.css">
</head>
<body>
<!-- Choose an id, for example my-modal -->
<div id="my-bootstrap-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<!-- Don't change this id: susmodal-content -->
<div id="susmodal-content" class="modal-content">
<div class="modal-body">
<p class="h3"> Hello! This is a <span style="text-decoration: underline;" >really</span> simple library for displaying modals (Bootstrap 4 CSS) </p>
</div>
<hr>
<div class="modal-footer">
<!-- Facultative but you can use the class "susmodal-close-btn" on elements for close the modal -->
<button type="button" class="btn btn-secondary susmodal-close-btn">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
<div id="my-bulma-modal" class="modal">
<!-- If you want to use backgroundDark property, you might add this tag instead of -->
<div class="modal-background"></div>
<!-- Don't change this id: susmodal-content -->
<div id="susmodal-content" class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<!-- Facultative but you can use the class "susmodal-close-btn" on elements for close the modal -->
<button class="delete susmodal-close-btn" aria-label="close"></button>
</header>
<section class="modal-card-body">
<!-- Content ... -->
<p class="h3"> Hello! This is a <span style="text-decoration: underline;" >really</span> simple library for displaying modals (Bulma CSS) </p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<!-- Facultative but you can use the class "susmodal-close-btn" on elements for close the modal -->
<button class="button susmodal-close-btn">Cancel</button>
</footer>
</div>
</div>
<div class="container my-5">
<div class="jumbotron">
<h1 class="display-4">Library modal!</h1>
<p class="lead">This is a really simple library for displaying modals.</p>
<hr class="my-4">
<button id="display-modal-bootstrap" class="btn btn-primary btn-lg">Display the bootstrap modal</button>
<button id="display-modal-bulma" class="btn btn-primary btn-lg">Display the bulma modal</button>
</div>
</div>
<script async type="module" src="src/app.js"></script>
</body>
</html>