none
彈跳凍結視窗的應用 RRS feed

  • 問題

  • 請教大家,這是參考Shadow And Happy Code前輩指點的jquery改寫的語法,而主要是想當使用者點選某按鈕後,是開啟另外一個頁面來讓使用者輸入(中間有傳值到開啟的頁面),但新的視窗必須有動作後才能回到原來視窗中,語法如下

    'ClientScript.RegisterClientScriptBlock(GetType(Page), "key", "$(document).ready(function () { " +
               '                                                                                             "csscody.alert('" & str2 & "'," +
               '                          "{ onComplete: function () {" +
               '                              "window.open('http://192.168.1.70/Schedule.aspx?uid=" & Session("uid") & "','_blank','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=no,minimizebutton=no,copyhistory=no,width=800,height=600,left=250,top=270');" +
               '                                                    "}" +
               '                          "}" +
               '                "); " +
               '"});", True)

    如上語法所述,它是可以執行的,但沒辦法把視窗凍結住,即使用者可以直接點選後來輸入原視窗的值,是否可以來調整修正呢?

    感謝

    2011年12月17日 上午 07:27

解答

  • 請教大家,這是參考Shadow And Happy Code前輩指點的jquery改寫的語法,而主要是想當使用者點選某按鈕後,是開啟另外一個頁面來讓使用者輸入(中間有傳值到開啟的頁面),但新的視窗必須有動作後才能回到原來視窗中,語法如下

    'ClientScript.RegisterClientScriptBlock(GetType(Page), "key", "$(document).ready(function () { " +
               '                                                                                             "csscody.alert('" & str2 & "'," +
               '                          "{ onComplete: function () {" +
               '                              "window.open('http://192.168.1.70/Schedule.aspx?uid=" & Session("uid") & "','_blank','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=no,minimizebutton=no,copyhistory=no,width=800,height=600,left=250,top=270');" +
               '                                                    "}" +
               '                          "}" +
               '                "); " +
               '"});", True)

    如上語法所述,它是可以執行的,但沒辦法把視窗凍結住,即使用者可以直接點選後來輸入原視窗的值,是否可以來調整修正呢?

    感謝


    您用的csscody 這套件本身就有凍結視窗效果:

    可以再繼續使用

    個人認為儘量統一套件別混合使用,來減少複雜化,否則後人維護困難

    (若要使用jQuery UI Dialog的話,也應該第一層Alert使用UI Dialog,接著第二層也使用同樣的套件)

     回歸正題,您的csscody alert第一層可以這樣改寫(以下粗體字)

    Code-Behind:

        Protected Sub Button3_Click(sender As Object, e As System.EventArgs) Handles Button3.Click
    
    
            Dim str2 = "繼續..."
            ClientScript.RegisterClientScriptBlock(GetType(Page), "key", "$(document).ready(function () { " +
                                                                                                         "csscody.alert('" + str2 + "'," +
                                      "{   onComplete: showDiv " +
                                      "}" +
                            "); " +
            "});", True)
        End Sub
    
    '當alert結束時,呼叫showDiv函數
    

     

     

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="VB.aspx.vb" Inherits="VB" %>
    
    <!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 id="Head1" runat="server">
    
        <!--引用jQuery核心函式庫-->
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <!--引用jQuery Alert plugin js和css -->
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/alertbox.js"></script>
        <link rel="stylesheet" type="text/css" href="js/style.css" />
        <!--注意css檔裡有定義圖檔路徑(js和images目錄在同一層)-->
    
      
        
        <script type="text/javascript">
    
            function showDiv(e) {
    
                
                var htmlVal = $("#divHide").html();
                csscody.info(htmlVal, {
                
                 textBoxBtnOk: '關閉視窗'
                
                });
    
                
    
                //把預設padding-left:55px設為0px
                $("#alert-BoxContenedor").css({ "padding-left": "0px" });
        
            
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
         
        <asp:Button Text="postBack後,出現Alert視窗,使用者按下OK後,再顯示另一個區塊" id="Button3"
                runat="server" onclick="Button3_Click" />
         
    
    
        <div id="divHide" style="display:none;">
        
           <asp:Literal runat="server" ID="li_showSessionStr" />
    
        </div>
    
        </form>
    </body>
    </html>
    

     

    再來就不知道您的子視窗有沒有要做提交動作,如果只是顯示資訊的話還比較單純

    在同一頁面的該按鈕的Click事件就可以設定 隱藏div裡控制項的值

     

        Protected Sub Button3_Click(sender As Object, e As System.EventArgs) Handles Button3.Click
            li_showSessionStr.Text = Session("uid")

     

            Dim str2 = "繼續..."
            ClientScript.RegisterClientScriptBlock(GetType(Page), "key", "$(document).ready(function () { " +
                                                                                                         "csscody.alert('" + str2 + "'," +
                                      "{   onComplete: showDiv " +
                                      "}" +
                            "); " +
            "});", True)
        End Sub


    如果子視窗要做提交動作的話,您就要使用jQuery Ajax技術來處理,避免子視窗(其實只是個div)被postback頁面刷新洗掉

     

    完整專案包

    附上csscody alert的官網
    方便大家瞭解此套件:http://csscody.com/demo/jquery-demo/custom-alert-boxes-using-jquery/80/ 

     


    Shadowと愉快なコード達





    2011年12月18日 上午 03:41

所有回覆

  • 因為你是用window.open去開新視窗。

    最快的方式是用showModalDialog,比較好的方式應該是jQuery的dialog,請參考:http://msdn.microsoft.com/zh-tw/scriptjunkie/ff608210.aspx


    若您的程式碼有SQL injection的問題,在修改完畢之前,我不願意給您任何解答。因為解決了您的程式問題,造成更大的系統漏洞問題,還不如讓程式壞掉。

    請參考:SQL injection簡介與解決方式

    常用資源參考:
    小弟的blog: In 91,wiki: my wiki
    2011年12月17日 上午 07:31
    版主
  • showModalDialog,可以做到您想要的效果,不過UI方式及背景全都要手工打造就是了

    另外像91大提的jQuery UI 也有類似的套件可以使用,會方便的多


    軟體開發領域裡區區一個迷途工程師
    MyBlog: http://www.dotblogs.com.tw/ian/
    開發ASP.NET您要瞭解的基楚
    2011年12月18日 上午 03:40
    版主
  • 請教大家,這是參考Shadow And Happy Code前輩指點的jquery改寫的語法,而主要是想當使用者點選某按鈕後,是開啟另外一個頁面來讓使用者輸入(中間有傳值到開啟的頁面),但新的視窗必須有動作後才能回到原來視窗中,語法如下

    'ClientScript.RegisterClientScriptBlock(GetType(Page), "key", "$(document).ready(function () { " +
               '                                                                                             "csscody.alert('" & str2 & "'," +
               '                          "{ onComplete: function () {" +
               '                              "window.open('http://192.168.1.70/Schedule.aspx?uid=" & Session("uid") & "','_blank','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=no,minimizebutton=no,copyhistory=no,width=800,height=600,left=250,top=270');" +
               '                                                    "}" +
               '                          "}" +
               '                "); " +
               '"});", True)

    如上語法所述,它是可以執行的,但沒辦法把視窗凍結住,即使用者可以直接點選後來輸入原視窗的值,是否可以來調整修正呢?

    感謝


    您用的csscody 這套件本身就有凍結視窗效果:

    可以再繼續使用

    個人認為儘量統一套件別混合使用,來減少複雜化,否則後人維護困難

    (若要使用jQuery UI Dialog的話,也應該第一層Alert使用UI Dialog,接著第二層也使用同樣的套件)

     回歸正題,您的csscody alert第一層可以這樣改寫(以下粗體字)

    Code-Behind:

        Protected Sub Button3_Click(sender As Object, e As System.EventArgs) Handles Button3.Click
    
    
            Dim str2 = "繼續..."
            ClientScript.RegisterClientScriptBlock(GetType(Page), "key", "$(document).ready(function () { " +
                                                                                                         "csscody.alert('" + str2 + "'," +
                                      "{   onComplete: showDiv " +
                                      "}" +
                            "); " +
            "});", True)
        End Sub
    
    '當alert結束時,呼叫showDiv函數
    

     

     

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="VB.aspx.vb" Inherits="VB" %>
    
    <!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 id="Head1" runat="server">
    
        <!--引用jQuery核心函式庫-->
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <!--引用jQuery Alert plugin js和css -->
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/alertbox.js"></script>
        <link rel="stylesheet" type="text/css" href="js/style.css" />
        <!--注意css檔裡有定義圖檔路徑(js和images目錄在同一層)-->
    
      
        
        <script type="text/javascript">
    
            function showDiv(e) {
    
                
                var htmlVal = $("#divHide").html();
                csscody.info(htmlVal, {
                
                 textBoxBtnOk: '關閉視窗'
                
                });
    
                
    
                //把預設padding-left:55px設為0px
                $("#alert-BoxContenedor").css({ "padding-left": "0px" });
        
            
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
         
        <asp:Button Text="postBack後,出現Alert視窗,使用者按下OK後,再顯示另一個區塊" id="Button3"
                runat="server" onclick="Button3_Click" />
         
    
    
        <div id="divHide" style="display:none;">
        
           <asp:Literal runat="server" ID="li_showSessionStr" />
    
        </div>
    
        </form>
    </body>
    </html>
    

     

    再來就不知道您的子視窗有沒有要做提交動作,如果只是顯示資訊的話還比較單純

    在同一頁面的該按鈕的Click事件就可以設定 隱藏div裡控制項的值

     

        Protected Sub Button3_Click(sender As Object, e As System.EventArgs) Handles Button3.Click
            li_showSessionStr.Text = Session("uid")

     

            Dim str2 = "繼續..."
            ClientScript.RegisterClientScriptBlock(GetType(Page), "key", "$(document).ready(function () { " +
                                                                                                         "csscody.alert('" + str2 + "'," +
                                      "{   onComplete: showDiv " +
                                      "}" +
                            "); " +
            "});", True)
        End Sub


    如果子視窗要做提交動作的話,您就要使用jQuery Ajax技術來處理,避免子視窗(其實只是個div)被postback頁面刷新洗掉

     

    完整專案包

    附上csscody alert的官網
    方便大家瞭解此套件:http://csscody.com/demo/jquery-demo/custom-alert-boxes-using-jquery/80/ 

     


    Shadowと愉快なコード達





    2011年12月18日 上午 03:41
  • 請教前輩:

    如果子視窗要做提交動作的話,您就要使用jQuery Ajax技術來處理,是指什麼方式嗎?

    因為我多一個按鈕後,點選後卻沒有任何反應

    感謝

    2011年12月31日 下午 12:15
  • 請教前輩:

    如果子視窗要做提交動作的話,您就要使用jQuery Ajax技術來處理,是指什麼方式嗎?

    因為我多一個按鈕後,點選後卻沒有任何反應

    感謝


    http://api.jquery.com/jQuery.ajax/

    http://webdesign.kerthis.com/jquery/jquery_ajax

    用jQuery Ajax來跟Server端互動,達成頁面不刷新效果(因為一刷新子視窗div就會被洗掉)


    2011年12月31日 下午 01:47