弹出消息框时，如何将背景颜色设置为黑色？

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> 

Answer 2

有一个jQuery插件。
也很容易使用：
$.blockUI({ message: 'HTML CONTENT HERE', css: { backgroundColor: '#f00'} });
您可以根据情况使用更多的参数。
要删除它，只需使用$.unblockUI();

您可以在此处找到更多详细信息。