diff options
author | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-21 06:31:38 +0100 |
---|---|---|
committer | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-21 06:31:38 +0100 |
commit | 33e70fafab726a89f0550c29a4e87a9bce791ae4 (patch) | |
tree | 76a91e4d23825f0568bf709c92adb1eab2772e96 /modal.css | |
parent | f3abd4c445ba292e8b93c062b2d4e0231b09de58 (diff) |
will modals work?
Diffstat (limited to 'modal.css')
-rw-r--r-- | modal.css | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/modal.css b/modal.css new file mode 100644 index 0000000..2ea7ee9 --- /dev/null +++ b/modal.css @@ -0,0 +1,37 @@ + /* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ +} + +/* Modal Content/Box */ +.modal-content { + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ +} + +/* The Close Button */ +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} |