Question

I want to create my own simple alert dialog with jQuery. Two problems: how do I disallow people to click on any elements in body before user clicks OK button in alert? And, how to make body all dark except one element? Thanks.

Answer 1

Place a div with partial opacity over all content. Typical CSS:

.cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: .7;
  background-color: #000;
  width: 100%;
  height: 100%;
}

Now place a positioned div, the dialog box, over the .cover div, and give this dialog a higher z-index.