diff --git a/JavaScript/modal/.gitingore b/JavaScript/modal/.gitingore new file mode 100644 index 0000000..6920a13 --- /dev/null +++ b/JavaScript/modal/.gitingore @@ -0,0 +1,35 @@ + +# Created by https://www.toptal.com/developers/gitignore/api/linux,git +# Edit at https://www.toptal.com/developers/gitignore?templates=linux,git + +### Git ### +# Created by git for backups. To disable backups in Git: +# $ git config --global mergetool.keepBackup false +*.orig + +# Created by git when using merge tools for conflicts +*.BACKUP.* +*.BASE.* +*.LOCAL.* +*.REMOTE.* +*_BACKUP_*.txt +*_BASE_*.txt +*_LOCAL_*.txt +*_REMOTE_*.txt + +### Linux ### +*~ + +# temporary files which can be created if a process still has a handle open of a deleted file +.fuse_hidden* + +# KDE directory preferences +.directory + +# Linux trash folder which might appear on any partition or disk +.Trash-* + +# .nfs files are created when an open file is removed but is still being accessed +.nfs* + +# End of https://www.toptal.com/developers/gitignore/api/linux,git diff --git a/JavaScript/modal/README.md b/JavaScript/modal/README.md new file mode 100644 index 0000000..dcca873 --- /dev/null +++ b/JavaScript/modal/README.md @@ -0,0 +1,6 @@ +# Modal +Code to create a modal window using JavaScript and CSS. + + + + diff --git a/JavaScript/modal/img/modal1.png b/JavaScript/modal/img/modal1.png new file mode 100644 index 0000000..8fc8d5c Binary files /dev/null and b/JavaScript/modal/img/modal1.png differ diff --git a/JavaScript/modal/img/modal2.png b/JavaScript/modal/img/modal2.png new file mode 100644 index 0000000..9dc7773 Binary files /dev/null and b/JavaScript/modal/img/modal2.png differ diff --git a/JavaScript/modal/index.html b/JavaScript/modal/index.html new file mode 100644 index 0000000..e1df1a9 --- /dev/null +++ b/JavaScript/modal/index.html @@ -0,0 +1,23 @@ + + + + + + Modal + + + +
+ +
+ +

* Click to open Modal *

+ + + + + diff --git a/JavaScript/modal/script.js b/JavaScript/modal/script.js new file mode 100644 index 0000000..df68a95 --- /dev/null +++ b/JavaScript/modal/script.js @@ -0,0 +1,7 @@ +document.getElementById("open-modal").addEventListener("click", function() { + document.getElementById("overlay").style.display = "block"; +}) + +document.getElementById("close-modal").addEventListener("click", function() { + document.getElementById("overlay").style.display = "none"; +}) diff --git a/JavaScript/modal/style.css b/JavaScript/modal/style.css new file mode 100644 index 0000000..04c789a --- /dev/null +++ b/JavaScript/modal/style.css @@ -0,0 +1,55 @@ +html, body { + margin: 0; + font-family: 'Courier New', Courier, monospace; + text-align: center; +} + + +body { + background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(62, 245, 209)); +} + +h1{ + padding-top: 50px; +} + +#open-modal, #close-modal { + background-color:blueviolet; + color: white; + border: none; + border-radius: 2px; + padding: 15px 32px; + font-size: 20px; + cursor: pointer; + +} + +#open-modal:hover { + background: black; + border: solid 1px blueviolet; +} + +#modal { + background-color: white; + width: 50%; + max-width: 600px; + margin: 0 auto; + padding: 20px; + height: 200px; + position: relative; + top: 30%; + opacity: 1; +} + +#overlay { + display: none; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.6); + +}