ymPrompt是一個很好用的替換網頁確定和取消對話方塊的指令碼.有了它我們可以彈出很漂亮的對話方塊.用在asp.net裡要做點小技巧.原因是button的onclientclick沒等使用者確定就提交了.
處理的方法關鍵在於回傳,button類型,handler的配置.直接在button1裡寫是不行的,那樣就馬上提交了.方法就是在提交前進行確認,然後由回呼函數提交表單.因為dopost用戶端指令碼在有不是button和imagebutton等回傳控制項的情況下才會觸發,所以加一個usesubmitbehavior屬性,讓用戶端有dopost指令碼.誰感興趣就做個控制項吧. 最後就是把按鈕隱藏了.
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <script type="text/javascript" src="ymPrompt.js"></script> <link rel="stylesheet" type="text/css" href="ymPrompt.css" /> </head><body> <form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" UseSubmitBehavior="false" style="display:none;" /> <input id="Button2" type="button" value="button" onclick="ymPrompt.confirmInfo({message:'資訊確認框功能測試',handler:handler})" /> <script type="text/javascript"> var handler=function(){ __doPostBack('Button1',''); } </script> <%-- http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html--%> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form></body></html>
2,解壓後，把skin檔案夾拷到你的css檔案夾裡面，把ymPrompt.js檔案拷到你的js檔案夾中。
3,下面就是頁面引入js和css檔案夾,在
<head>
<script type="text/javascript" src="js/ymPrompt.js"></script> <link rel="stylesheet" type="text/css" href="css/skin/qq/ymPrompt.css" />
</head>
3,在頁面使用，<input id="input1" onclick="ymPrompt.alert('顯示的內容','寬度,要是不想設可以傳null','高度要是不想設可以傳null','標題',回呼函數);"要是你只需要彈出簡單的對話方塊提示使用者，可以不設回呼函數。如果需要使用者點擊的狀態，確定/取消/關閉按鈕被點擊時會觸發該回呼函數並傳入點擊的按鈕標識。如ok代表確定，cancel代表取消，close代表關閉 ，這樣就可以作相應的處理。但是我們在實際的開發中，可能不能這樣用，因為我們用的是伺服器控制項的button，我們在程式的判斷中需要彈出來，這樣就需要， 我們可以寫一個通用的方法，傳入一個彈出要顯示的內容，
Response.Write("<script type='text/javascript' src='js/ymPrompt.js'></script> ");
Response.Write("<script type='text/javascript'>ymPrompt.alert('" + title + "',null,null,'抽獎活動');</script>");
就這幾步，就完成了彈出漂亮對話方塊的效果來了。哈哈！但是有一個問題，不得不說，這個東西雖然好看，但是會影響系統的效能，建議那些對系統效能要求很高的不要輕易的使用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
