How to position a modal box

JavaScript
1

I am trying to position a modal box. ( a ‘confirm’ jBox), so that it initially appears a little lower when viewed via mobile phone. I tried several things (guesses) without success. Any suggestions would be appreciated. Here’s the page script code and css:

<script>
$(document).ready(function() {
  new jBox('Confirm', {
    content: 'Select <i>Agree</i><br /> To Agree To The</h5> <a href="/Terms.php">Upload Terms</a>',
    width: 330,
    height: 105,
    cancelButton: '<a href="/index.html">Home</h5></a>',
	confirmButton: 'Continue',
    confirm: function () {
    close();
    },
    cancel: function () {
    disable(),
    window.location.href = "/index.html";
    }
  }).open();
});
</script>

.jBox-Confirm .jBox-content {
  text-align: center;
  background: #085372;
  opacity: 0.9;
}

.jBox-Confirm-footer {
  height: 46px;
}

.jBox-Confirm-button {
  display: block;
  float: left;
  cursor: pointer;
  text-align: center;
  width: 50%;
  line-height: 0px;
  height: 40px;
  overflow: hidden;
  padding: 3px;
  transition: color .2s, background-color .2s;
  box-sizing: border-box;
}

.jBox-Confirm-button-cancel {
  border-bottom-left-radius: 4px;
  background: #000000;
  color: #666;
}

.jBox-Confirm-button-cancel:hover,
.jBox-Confirm-button-cancel:active {
  
}

.jBox-Confirm-button-submit {
  border-bottom-right-radius: 4px;
  background: #0b85a2;
  color: #fff;
}

.jBox-Confirm-button-submit:hover,
.jBox-Confirm-button-submit:active {
 background-color: transparent;
}

.jBox-Confirm-button-cancel:active,
.jBox-Confirm-button-submit:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

@media (max-width: 500px) {
  
  .jBox-Confirm .jBox-content {
    padding: 32px 20px;
  }

}
2

What exactly goes wrong? What is it supposed to do?

3

Thanks for your reply. I have resolved this

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.