javascript - 弹出消息框时如何让背景颜色变黑？

Question

$("documant").ready(function() {
  $("#add_form").hide(); //message box hide in the beginning
});

function checkID() {
  if ($("#add_form").is(":hidden")) {
    $("#userID").val("");
    $("#add_form").slideDown(500);
  } else {
    $("#add_form").hide();
  }
}

function closeForm() {
  $("#add_form").hide(); // hide form when click cancel
}

.center {
  position: absolute;
  text-align: center;
  z-index: 100;
}
#add_form {
  margin: 0 auto;
  width: 200px;
  background-color: #f0f0f0;
}
#add_form p {
  font-size: 1.2em;
}
#submitGetCancel,
#submitGetCheck {
  width: 40%;
  height: 50px;
  color: #740000;
  font-size: 1.3em;
}
#overlayBackground {
  background: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="click" onclick="checkID();">Click</button>
<br/>
<p>Some text here</p>
<div class="center">
  <div id="add_form">
    <p>Please type your infos</p>
    <input type="text" id="userID" name="userID">
    <br/>
    <button type="button" class="btn btn_cancel" id="submitGetCancel">Send</button>
    <button type="button" class="btn btn_add" id="submitGetCheck" onclick="closeForm();">Cancel</button>
  </div>
</div>

当我点击按钮时，会显示一个消息框。

我怎样做才能使我的背景颜色有点黑，这意味着当显示消息框时我仍然可以看到消息框下的内容，并且当单击取消框时一切都会恢复为默认值？

Answer 1

您可以创建一个动态叠加 div 并使用 rgba() 设置背景颜色:

$(document).ready(function() {
  $("#add_form").hide(); //message box hide in the beginning
});

function checkID() {
  if ($("#add_form").is(":hidden")) {
    $("#userID").val("");
    $("#add_form").slideDown(500);
    $('<div/>',{ // <------------------create a dynamic overlay div
      id:"overlay"
    }).appendTo("body"); //<-----append to body.
  } else {
    $("#add_form").hide();
  }
}

function closeForm() {
  $("#add_form").hide(); // hide form when click cancel
  $('#overlay').remove(); // <-----------------remove this overlay when cancel clicked.
}

.center {
  position: absolute;
  text-align: center;
  z-index: 100;
}
#add_form {
  margin: 0 auto;
  width: 200px;
  background-color: #f0f0f0;
}
#add_form p {
  font-size: 1.2em;
}
#submitGetCancel,
#submitGetCheck {
  width: 40%;
  height: 50px;
  color: #740000;
  font-size: 1.3em;
}
#overlayBackground {
  background: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 5;
}
#overlay{
  background:rgba(0, 0, 0, .5);
  width:100%;
  height:100%;
  position:fixed;
  left:0;
  top:0;
  z-index:2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="click" onclick="checkID();">Click</button>
<br/>
<p>Some text here</p>
<div class="center">
  <div id="add_form">
    <p>Please type your infos</p>
    <input type="text" id="userID" name="userID">
    <br/>
    <button type="button" class="btn btn_cancel" id="submitGetCancel">Send</button>
    <button type="button" class="btn btn_add" id="submitGetCheck" onclick="closeForm();">Cancel</button>
  </div>
</div>