From bd1c2113b395562ea9a6575eb568be7a21a847de Mon Sep 17 00:00:00 2001
From: Bigsk <xiaxinzhe@xiaxinzhe.cn>
Date: Sat, 1 Oct 2022 22:54:55 +0800
Subject: [PATCH] first release

---
 README.md | 10 +++++++++-
 modal.css | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 modal.js  | 20 ++++++++++++++++++++
 3 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 modal.css
 create mode 100644 modal.js

diff --git a/README.md b/README.md
index 0266576..2bed646 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,11 @@
 # Image_Modal
 
-Modal Box for image showcase
\ No newline at end of file
+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
diff --git a/modal.css b/modal.css
new file mode 100644
index 0000000..754983d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/modal.js b/modal.js
new file mode 100644
index 0000000..7a2c54c
--- /dev/null
+++ b/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";
+}
\ No newline at end of file