Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (68835 Members, 786 Products, 5386 Topic, 13072 Comments)

membuta detail modal pada page download area di sikolag ci

Dibuat
Login Terakhir 1 Bulan lalu,
Telah Dilihat 1063 Kali
zulkifli_labs Mengatakan : Sultan Account 
  1. Assalamualaikum Warahmatullahi Wabarakatuh... ada yg punya tutor membuat detail Modal tanpa bootsrap di  halaman download pada sikolag

Ada 1 Jawaban

Bukhori Muslim
commented on 15 Apr 2019 16:21:35		 
  1. Assalam,.. bisa dengan ini gan, menggunakan css murni tanpa jquery :
  2. <html>
  3. <head>
  4. <title>Contoh Modal dengan CSS Murni</title>
  5. </style>
  6. .modal {
  7.   opacity: 0;
  8.   visibility: hidden;
  9.   position: fixed;
  10.   top: 0;
  11.   right: 0;
  12.   bottom: 0;
  13.   left: 0;
  14.   text-align: left;
  15.   background: rgba(0,0,0, .9);
  16.   transition: opacity .25s ease;
  17. }
  18.  
  19. .modal__bg {
  20.   position: absolute;
  21.   top: 0;
  22.   right: 0;
  23.   bottom: 0;
  24.   left: 0;
  25.   cursor: pointer;
  26. }
  27.  
  28. .modal-state {
  29.   display: none;
  30. }
  31.  
  32. .modal-state:checked + .modal {
  33.   opacity: 1;
  34.   visibility: visible;
  35. }
  36.  
  37. .modal-state:checked + .modal .modal__inner {
  38.   top: 0;
  39. }
  40.  
  41. .modal__inner {
  42.   transition: top .25s ease;
  43.   position: absolute;
  44.   top: -20%;
  45.   right: 0;
  46.   bottom: 0;
  47.   left: 0;
  48.   width: 50%;
  49.   margin: auto;
  50.   overflow: auto;
  51.   background: #fff;
  52.   border-radius: 5px;
  53.   padding: 1em 2em;
  54.   height: 50%;
  55. }
  56.  
  57. .modal__close {
  58.   position: absolute;
  59.   right: 1em;
  60.   top: 1em;
  61.   width: 1.1em;
  62.   height: 1.1em;
  63.   cursor: pointer;
  64. }
  65.  
  66. .modal__close:after,
  67. .modal__close:before {
  68.   content: '';
  69.   position: absolute;
  70.   width: 2px;
  71.   height: 1.5em;
  72.   background: #ccc;
  73.   display: block;
  74.   transform: rotate(45deg);
  75.   left: 50%;
  76.   margin: -3px 0 0 -1px;
  77.   top: 0;
  78. }
  79.  
  80. .modal__close:hover:after,
  81. .modal__close:hover:before {
  82.   background: #aaa;
  83. }
  84.  
  85. .modal__close:before {
  86.   transform: rotate(-45deg);
  87. }
  88.  
  89. @media screen and (max-width: 768px) {
  90.  
  91.   .modal__inner {
  92.     width: 90%;
  93.     height: 90%;
  94.     box-sizing: border-box;
  95.   }
  96. }
  97.  
  98.  
  99. /* Other
  100.  * =============================== */
  101. body {
  102.   padding: 1%;
  103.   font: 1/1.5em sans-serif;
  104.   text-align: center;
  105. }
  106.  
  107. .btn {
  108.   cursor: pointer;
  109.   background: #27ae60;
  110.   display: inline-block;
  111.   padding: .5em 1em;
  112.   color: #fff;
  113.   border-radius: 3px;
  114. }
  115.  
  116. .btn:hover,
  117. .btn:focus {
  118.   background: #2ecc71;
  119. }
  120.  
  121. .btn:active {
  122.   background: #27ae60;
  123.   box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
  124. }
  125.  
  126. .btn--blue {
  127.   background: #2980b9;
  128. }
  129.  
  130. .btn--blue:hover,
  131. .btn--blue:focus {
  132.   background: #3498db;
  133. }
  134.  
  135. .btn--blue:active {
  136.   background: #2980b9;
  137. }
  138.  
  139. p img {
  140.   max-width: 200px;
  141.   height: auto;
  142.   float: left;
  143.   margin: 0 1em 1em 0;
  144. }
  145. </style>
  146. </head>
  147. <body>
  148. <h1>Pure CSS modal box</h1>
  149. <div>
  150.   <p>You can place trigger button wherever you want.</p>
  151.   <p>
  152.     <label class="btn" for="modal-1">Show me modal with a cat</label>
  153.     <label class="btn btn--blue" for="modal-2">Click for more AWW</label>
  154.   </p>
  155. </div>
  156.  
  157. <input class="modal-state" id="modal-1" type="checkbox" />
  158. <div class="modal">
  159.   <label class="modal__bg" for="modal-1"></label>
  160.   <div class="modal__inner">
  161.     <label class="modal__close" for="modal-1"></label>
  162.     <h2>Caaaats FTW!</h2>
  163.     <p><img src="https://i.imgur.com/HnrkBwB.gif" alt="" />Aliquam in sagittis nulla. Curabitur euismod diam eget risus venenatis, sed dictum lectus bibendum. Nunc nunc nisi, hendrerit eget nisi id, rhoncus rutrum velit. Nunc vel mauris dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fringilla quis nisi eget imperdiet.</p>
  164.   </div>
  165. </div>
  166.  
  167. <input class="modal-state" id="modal-2" type="checkbox" />
  168. <div class="modal">
  169.   <label class="modal__bg" for="modal-2"></label>
  170.   <div class="modal__inner">
  171.     <label class="modal__close" for="modal-2"></label>
  172.     <h2>Sleppy sloth</h2>
  173.     <p><img src="https://i.imgur.com/TPx9zYo.gif" alt="" />Aliquam in sagittis nulla. Curabitur euismod diam eget risus venenatis, sed dictum lectus bibendum. Nunc nunc nisi, hendrerit eget nisi id, rhoncus rutrum velit. Nunc vel mauris dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fringilla quis nisi eget imperdiet.</p>
  174.   </div>
  175. </div>
  176. </body>
  177. </html>
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!

CV Asktech Indonesia

Cari Produk Digital, Freelancer Terbaik dan Terpercaya di Indonesia

CV Asktech Indonesia
Jl. Angkasa Puri, Perundam V, Tunggul Hitam
Padang 25176 - Indonesia

Telp./Fax. (0751) 461695
Phone/WA. +62-812-6777-1344
E-mail robby.prihandaya@gmail.com

Tentang Kami

Jam Layanan

  • Senin - Jum'at: 09:00 - 17:00 WIB
  • Sabtu - Minggu: 09:00 - 15:00 WIB

Knowledgebase

Online