jQueryAlert:jQuery JS的Alert、Comfirm、Prompt的提示对话框效果，效果非常棒，可以用来模拟代替默认的对话框

 

jQueryAlert:jQuery JS的Alert、Comfirm、Prompt的提示对话框效果，效果非常棒，可以用来模拟代替默认的对话框

地址：http://blog.csdn.net/bluesuperman/article/details/5270139

你需要引入：

<script type='text/javascript' src='../js/jquery/jquery-1.3.2.js'></script>
<script type='text/javascript' src='../js/alert/jquery.alerts.js'></script>
<script type='text/javascript' src='../js/alert/jquery.ui.draggable.js'></script>
<link href="../../App_Themes/Default/jquery.alerts.css" type="text/css" rel="stylesheet" />

 

例子：

$(document).ready( function() {
    
    $("#alert_button").click( function() {
     jAlert('This is a custom alert box', 'Alert Dialog');
    });
    
    $("#confirm_button").click( function() {
     jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
      jAlert('Confirmed: ' + r, 'Confirmation Results');
     });
    });
    
    $("#prompt_button").click( function() {
     jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
      if( r ) alert('You entered ' + r);
     });
    });
    
    $("#alert_button_with_html").click( function() {
     jAlert('You can use HTML, such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
    });
    
    $(".alert_style_example").click( function() {
     $.alerts.dialogClass = $(this).attr('id'); // set custom style class
     jAlert('This is the custom class called &ldquo;style_1&rdquo;', 'Custom Styles', function() {
      $.alerts.dialogClass = null; // reset to default
     });
    });
   });

 

在使用过程中，发现如果删除功能使用到jConfirm无论是否点击是或者否都将会提交，是因为执行方法jConfirm并不会等它执行完毕后在继续执行，并不像js默认提供的confirm，所以写代码的时候要像下面的样子写

 

function ShowDeleteMessage(btnDelete){
        jConfirm('您確定要刪除嗎?', '信息提示', function(r) {
   if(r){
       if (r) location.href = $(btnDelete).attr('href');
   }
  });
  $(btnDelete).click( function () {return false;});
    }

 

aspx：

<asp:LinkButton ID="LinkDelete" runat="server" CommandName="Del" OnClientClick="return ShowDeleteMessage(this);" CommandArgument='<%# Eval("spd_id")%>'><span>刪除</span>
</asp:LinkButton>

 

生成的html

<a onclick="return ShowDeleteMessage(this);" id="ctl00_MainContent_dbGrid_ctl03_LinkDelete" href="javascript:__doPostBack('ctl00$MainContent$dbGrid$ctl03$LinkDelete','')"><span>刪除</span>
</a>

 

这样对比来看，和语言无关了，无论是jsp还是php写法应该都差不多。

 

顺便说一句，如果在后台执行某个方法要向画面传递提示信息，如新增删除或者其他事件成功后到画面显示新增成功或者删除成功等，如果直接调用

cs:

String sScript = String.Format("showMessage('{0}')", "新增成功");
ScriptManager.RegisterStartupScript(ctrl, ctrl.GetType(), "alert", sScript,true);

 

aspx.js:

function showMessage(mess){
       jAlert(mess, '信息提示');
}

 

像上面这样写，在实际运行时候提交完成后重新回到画面会出现错误(出现Internet Explorer无法打开Internet 站点，已终止操作)，应该是dom节点未加载完毕而又jQueryAlert引用引起的。

 

所以你需要如下编写

cs:

 String sScript = String.Format("<script type='text/javascript' defer='defer'>showMessage('{0}');</script>",  "新增成功");
ScriptManager.RegisterStartupScript(ctrl, ctrl.GetType(), "alert", sScript, false);

 

aspx.js：

function showMessage(mess){
        if(window.onload && document.readyState== "complete")  {
            jAlert(mess, '信息提示');
        }else{
            setTimeout("showMessage('"+mess+"')", 100);   //防止畫面未加載完畢就調用jAlert，有可能會出現錯誤
        }
    }

 

下载地址

http://download.csdn.net/source/2033466

http://jqueryui.com/demos/dialog/