Scroll to top

Haloo! Selamat Datang di Komunitas Private Training Web Development (42757 Members, 380 Projects, 3389 Topic, 9313 Comments)

Butuh karyawan baru? atau seorang Web Developer (Part-time/Freelance/Full-time) untuk mengerjakan project/aplikasi anda?, cari disini : Members Area Jobs!
membuta detail modal pada page download area di sikolag ci
zulkifli pipin Mengatakan : Members -
Rate Topic : 
  1. Assalamualaikum Warahmatullahi Wabarakatuh... ada yg punya tutor membuat detail Modal tanpa bootsrap di  halaman download pada sikolag
Bukhari al 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 !!!