Haloo! Selamat Datang di Komunitas Private Training Web Development (51171 Members, 544 Projects, 4034 Topic, 10777 Comments)

Butuh karyawan baru? atau seorang Web Developer (Part-time/Freelance/Full-time), cari disini : Members Area Jobs!

membuta detail modal pada page download area di sikolag ci

Dibuat
Login Terakhir 17 Hari lalu,
Telah Dilihat 229 Kali
Benta_Palu34 Mengatakan : Premium -
Rate Topic : 
  1. Assalamualaikum Warahmatullahi Wabarakatuh... ada yg punya tutor membuat detail Modal tanpa bootsrap di  halaman download pada sikolag

Ada 1 Jawaban

Bukhori Muslim 10 Bulan lalu  
Premium - 
  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 !!!