first release

README.md

@@ -1,3 +1,11 @@
 # Image_Modal
 
-Modal Box for image showcase
+Modal Box for image showcase
+
+### How to use
+
+1. Import modal.js and modal.css
+2. Set your object class as img-obj
+3. Add onClick method on your object and inside code is
+ >show_modal(this)
+4. Now enjoy your image showcase :D

modal.css

@@ -0,0 +1,55 @@
+/*!
+ * Image Modal
+ * Copyright 2022 Bigsk (Ian Xia)
+ * Licensed under MIT
+ */
+.img-obj:hover{
+    opacity: 0.6;
+}
+#modal{
+    display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.7);
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+}
+#modal_img{
+    display: block;
+    margin:25px auto;
+    width: 60%;
+    max-width: 750px;
+}
+#caption{
+    text-align: center;
+    margin: 15px auto;
+    width: 60%;
+    max-height: 750px;
+    font-size: 20px;
+    color:#ccc;
+}
+#modal_img,#caption{
+    -webkit-animation: first 1s;
+    -o-animation: first 1s;
+    animation: first 1s;
+}
+@keyframes first{
+    from{transform: scale(0.1);}
+    to{transform: scale(1);}
+}
+.close{
+    font-size: 40px;
+    font-weight: bold;
+    position: absolute;
+    top: 20px;
+    right: 14%;
+    color:#f1f1f1;
+}
+.close:hover,
+.close:focus{
+    color:#bbb;
+    cursor:pointer;
+}

modal.js

@@ -0,0 +1,20 @@
+/*!
+ * Image Modal
+ * Copyright 2022 Bigsk (Ian Xia)
+ * Licensed under MIT
+ */
+let modal = document.getElementById('modal')
+let modal_img = document.getElementById("modal_img")
+let caption = document.getElementById("caption")
+
+function show_modal(obj){
+    modal.style.display = "block"
+    modal_img.src = obj.src
+    caption.innerHTML = obj.alt
+}
+
+let span = document.getElementById("close");
+
+span.onclick = function(){
+    modal.style.display = "none";
+}