Css Javascript Modal Box App

guneyural · web-flow · commit 832cca7382aa · 2020-10-23T17:06:29.000+03:00
diff --git a/PopupModalApp/app.js b/PopupModalApp/app.js
@@ -0,0 +1,11 @@
+const modal = document.querySelector('.myModal');
+const btn = document.querySelector('.btn');
+const close = document.querySelector('span');
+
+btn.addEventListener('click', function() {
+     modal.style.display = "block";
+});
+
+close.addEventListener('click', function() {
+     modal.style.display = "none";
+});
diff --git a/PopupModalApp/index.html b/PopupModalApp/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+     <script src="https://use.fontawesome.com/01826e8fb5.js"></script>
+     <link rel="stylesheet" type="text/css" href="style.css">
+     <title>Popup Modal App</title>
+</head>
+<body>
+     <div class="myModal">
+          <div class="popup-content">
+               <span>X</span>
+               <h1>BMW 640d xDrive 313 HP</h1>
+               <p>Yukarıdaki arabanın siyahı bizim güneyde var</p>
+          </div>
+     </div>
+
+     <div class="container">
+          <h1 class="display-1 text-center">Güney Fucking Ural</h1>
+          <button class="btn" id="getModal">Open Modal Box!</button>
+     </div>
+
+     <script src="app.js"></script>
+</body>
+</html>
diff --git a/PopupModalApp/style.css b/PopupModalApp/style.css
@@ -0,0 +1,50 @@
+body {margin: 0;padding:0;font-family: 'Montserrat', Arial, Helvetica, sans-serif}
+
+.myModal {
+     display: none;
+     position: fixed;
+     z-index: 1;
+     top: 0;
+     left: 0;
+     width: 100%;
+     height: 100%;
+     overflow: auto; 
+     background-color: rgb(0,0,0);
+     background-color: rgba(0,0,0,0.4);
+     padding-top: 250px; 
+     transition: 0.4s;
+}
+
+.popup-content {
+     margin: auto;
+     background-color: white;
+     width: 40%;
+}
+
+span {
+     float: right;
+     font-size: 28px;
+     padding-right: 10px;
+}
+
+span:hover {
+     cursor: pointer;
+     color: black;
+}
+
+.btn {
+     display:block;
+     border:1px solid #1b68e3;
+     background: #1b68e3;
+     border-radius: 8px;
+     padding: 20px;
+     font-size: 30px;
+     font-weight: bold;
+     color: white;
+     letter-spacing: 3px;
+     text-align: center;
+     margin: auto;
+     margin-top: 130px;
+     cursor: pointer;
+     outline: 0;
+}
