jquery.alerts jquery.bolckUI

来源：互联网发布：局域网代理上网软件编辑：程序博客网时间：2024/05/25 18:11

1、改变原始的alert
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>

<title>jQuery AlertDialogs<</title>
   <script src="_assets/js/jquery.js"type="text/javascript"></script>
   <script src="_assets/js/jquery.ui.draggable.js"type="text/javascript"></script>
   <script src="_assets/js/jquery.alerts.js"type="text/javascript"></script>
   <link href="_assets/css/jquery.alerts.css"rel="stylesheet" type="text/css" media="screen"/>

   <script type="text/javascript">

       $(document).ready(function() {

           $("#alert1").click(function() {
               jAlert('error', 'This is the error dialog box with some extratext.', 'Error Dialog');
           });

           $("#alert2").click(function() {
               jAlert('warning', 'This is the warning dialog along with some<u>html</u>.','Warning

Dialog');
           });

           $("#alert3").click(function() {
               jAlert('success', 'This is the success dialog.', 'SuccessDialog');
           });

           $("#alert4").click(function() {
               jAlert('info', 'This is the info dialog.', 'Info Dialog');
           });

           $("#confirm").click(function() {
               jConfirm('Can you confirm this?', 'Confirmation Dialog',function(r) {
                   jAlert('success', 'Confirmed: ' + r, 'Confirmation Results');
               });
           });

           $("#prompt").click(function() {
               jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog',function(r) {
                   if (r) alert('You entered ' + r);
               });
           });
       });

   </script>
</head>
<body>
   <h1>jQuery AlertDialogs</h1>
   <input id="alert1" type="button" value="Error"/>
   <input id="alert2" type="button" value="Warning"/>
   <input id="alert3" type="button" value="Success"/>
   <input id="alert4" type="button" value="Info"/>
   <input id="prompt" type="button" value="Prompt"/>
   <input id="confirm" type="button" value="confirm"/>
</body>
</html>

2、利用blockUI 自制会自动消失

   <script type="text/javascript"src="/waykers/js/jquery_min.js"></script>


     <script type="text/javascript"src="/waykers/js/mygifts/jquery.blockUI.js"></script>
     <script type="text/javascript"src="/waykers/js/mygifts/alert.js"></script>

Alert("请选择赠送对象！");

alert.js

functionAlert(message){               //代替alert

       var mes="<div id='question' style='cursor:default'>"
       +"<h3>"+message+"</h3>"
       +"<input type='button' id='yes' value='确定'onclick=\"cancle()\" />"
       +" </div>";


          $.blockUI({message: mes });
         setTimeout($.unblockUI, 2000);

}

function cancle(){
       $.unblockUI();
       return false;
       }