Div Chapter Show SlideUp

Kode Div Image

Letakan Element ini di Tempat <data:post.body/> Manga dan Kurung Element <data:post.body/> dengan element ini


<div id="divChapter">
<div class="protectimg">

<!-- Post  Image Chapter In Here -->
<!-- <data:post.body/> Place In Here -->

</div>
</div>

Kode Div Kontent

Dan Setelah itu Letakan Element yang kalian mau pasang di dalam Modal SlideUp

kesini


<!-- Div Slideup Next Prev Here-->
<div class="Divstyle" id="Divnextprev">
 <div class="Divcontent">
<span class="closebtn">Close</span>
    <div class="ChNextprev">
    Place the Element here
  <p>Some other text...</p>
    </div>
    </div>
</div>

Kode Css

Letakan di tempat css yaitu didalam <b:skin> disini tempatnya </b:skin>


.Divstyle {
  display: none;
  position: fixed;
  z-index: 10;
  padding-top: 20px;/*Position Popup*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: brightness(0.5);
}
.Divcontent {
  position: relative;
  background-color: #1e2129;
  color: #eee;
  margin: auto;
  padding: 15px;
  border: none;
  border-radius: 15px;
  width: 90%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.8s;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
.closebtn {
  color: #eee;
  float: right;
  font-size: 10px;
  font-weight: bold;
  padding: 10px 5px;
  margin: -5px -3px 0 0;
  background: #000000;
  border-radius: 50%;
  outline: 1px dashed #00ff8f;
}
.closebtn:hover,
.closebtn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
div#divChapter {
  margin: auto;
}
.ChNextprev {padding: 2px 16px;} 
.protectimg {pointer-events: none;
    cursor: default;} 
.protectimg .separator a {
  gap: 0;
  margin: 0;
  padding: 0 !important;
}
  .protectimg img {
  width: 100%;
  margin: auto;
}

Kode Javascript

Kode Javascript ini Letakan saja di atas </body>


<script>
 /*<![CDATA[*/
var divNexprev = document.getElementById("Divnextprev");
var btnOutdiv = document.getElementById("divChapter");
var btnClose = document.getElementsByClassName("closebtn")[0];
btnOutdiv.onclick = function() {divNexprev.style.display = "block";}
btnClose.onclick = function() {
divNexprev.style.display = "none";}
window.onclick = function(event) {
  if (event.target == divNexprev) {
    divNexprev.style.display = "none";
  }
}
/*]]>*/
</script>