Haloo! Selamat Datang di Komunitas Private Training Web Development (45665 Members, 427 Projects, 3528 Topic, 9666 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
Benta_Palu34 Mengatakan : Members -
Rate Topic : 
  1. Assalamualaikum Warahmatullahi Wabarakatuh... ada yg punya tutor membuat detail Modal tanpa bootsrap di  halaman download pada sikolag
Bukhori Muslim Mengatakan :
Admin - 
  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 !!!