New Position center

dabblet.css

/* New Position center */
.dialog {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
}

.dialog-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 300px;
  height: 300px;
  border: 5px solid #000;
  background-color: beige;
}

.dialog-header {
  padding: 10px;
  background-color: tomato;
}

.dialog-body {
  padding: 10px;
}

.dialog-close {
  position: absolute;
  top: -18px;
  right: -18px;
  border-radius: 36px;
  border: 5px solid #000;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background-color: white;
  font-weight: bold;
}


/* ---- for demo --- */
* {
  margin: 0;
  padding: 0;
}

body {
}

a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

dabblet.html

<div class="dialog">
  <div class="dialog-content">
    <h2 class="dialog-header">Popup dialog</h2>
    <p class="dialog-body">Popup Content</p>
    <a class="dialog-close">X</a>
  </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"140","seethrough":"","prefixfree":"1","page":"all"}