Html wait Interface
<Div id = "form_submit"> <input type = "button" id = "message_submit" value = "Publish message" onclick = "sendOSMessageForAll () "/> </div> <! -- Wait div --> <div id = "pop" style = "z-index: 1; background-color: # CCCCCC; filter: alpha (opacity = 80); width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; display: none "> <! -- <Div style = "text-align: center; height: 100%; line-height: 250px; overflow: hidden;"> sending... please wait... </div> --> </div> <div id = "loading" class = "loading" style = "display: none;"> sending... please wait... </div>
<Script type = "text/javascript"> <! -- Open or close the wait div --> function show (o1, o2, open) {var o1 = document. getElementById (o1); var o2 = document. getElementById (o2); o1.style. width = document.doc umentElement. scrollWidth; o1.style. height = document.doc umentElement. scrollHeightif (open) {o1.style. display = "block"; o2.style. display = "block";} else {o1.style. display = "none" ;}} function showLoading (open) {var dialog = document. getElementById ("loading" ); If (open) {dialog. style. display = "block";} else {dialog. style. display = "none";} return true;} function sendOSMessageForAll () {show ('pop', 'message _ Form', true); showLoading (true); $. ajax ({url: 'android/createOSMessage. action ', data: {senderId: $ ("# senderId "). attr ("value"), content: $ ("# content "). attr ("value"), receiver: $ ("# receiver "). attr ("value")}, cache: false, async: true, type: "POST", dataType: 'Json', beforeSend: function () {show ('pop', 'message _ Form', true); showLoading (true) ;}, success: function (result) {if (result! = Null) {if (result. status = "0") {show ('pop', 'message _ Form', false); showLoading (false); alert ("sent successfully! ");} Else {show ('pop', 'message _ Form', false); showLoading (false); alert (" failed to send! ") ;}}, Error: function (msg) {show ('pop', 'message _ Form', false); showLoading (false); alert (" sending error! ") ;}, Complete: function () {}}) ;}</script>
Effect