首頁 > 開發者 > JSP

jsp js彈出網頁對話方塊

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
使用DHTML，可以有兩種實現方法：

1.通過window.open方法以彈出頁面方式實現。2.通過window.showModalDialog方法以彈出對話方塊方式實現。(推薦) 一.通過window.open方法彈出對話方塊在寫JSP頁面的時候，有時需要點擊一個按鈕彈出一個輸入對話方塊，然後輸入一個值，確定後關閉對話方塊，把資料寫入資料庫，重新整理當前頁面。這樣的功能可以用JavaScript實現；不過如果用js內建的對話方塊的話，對話方塊不美觀，不如用一個JSP頁面來做對話方塊。   在頁面AddName.jsp裡要調用對話方塊，寫一個JSP頁面NewBox.jsp（用做對話方塊），然後在頁面AddName.jsp裡加上一段js代碼：/*用來開啟對話方塊頁面*/function openwindow(){ 
         window.open ("NewBox.jsp","Sample","fullscreen=no,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no, copyhistory=no,width=350,height=140,left=200,top=300");
       }             /*在NewBox.jsp裡調用這個函數，用來重新整理AddName.jsp*/     function opensub(){
  document.form1.submit();
       }   在這裡要對window.open裡的參數做一下說明：   fullscreen=no 視窗模式，yes為全螢幕模式   toolbar=no, 顯示工具條
　　location=no,顯示網址欄
　　directories=no,導航條
　　status=no,狀態條
　　menubar=no,菜單
　　scrollbars=no,捲軸
　　resizable=no,是否可以改變大小
　　copyhistory=no,曆史按鈕
　　width=350,寬
　　height=140'高
　　left=200,距離左邊200
　　top=300,距離頂端300這時要在NewBox.jsp裡加上一部分js代碼，下面是NewBox.jsp的代碼  
<html>
  <head >
    <title>建立郵件夾輸入框</title>
    <SCRIPT>
      <!--
        function bconfirm(){
           opener.document.all['inboxname'].value=document.form1.inboxname.value;
           opener.opensub();
           window.close();
        }
       
       function bcancel(){
           window.close();
        }
      -->
    </SCRIPT>
  </head>                                
                   
  <body bgcolor=#66CD00>
    <FONT size=5>請輸入新郵件夾的名稱：</FONT>
    <FORM method=post name=form1 action="">
      <INPUT type=text name=inboxname size=35><p>
      <INPUT type=button name=inputboxbt value=確定 onclick="bconfirm();">
      <INPUT type=button name=inputboxbs value=取消 onclick="bcancel();">
    </FORM>
   
  </body>
</html>
在NewBox.jsp裡先給AddName.jsp裡的一個隱藏表單inboxname賦值，就是這句：  opener.document.all['inboxname'].value=document.form1.inboxname.value;  然後調用AddName.jsp裡的一個js函數：opener.opensub(); 這樣AddName.jsp就會自動認可表單到Servlet接著重新整理頁面，這樣就完成了！

二.通過window.showModalDialog方法彈出對話方塊。（推薦）
    仍然是在頁面AddName.jsp裡要調用對話方塊，寫一個JSP頁面NewBox.jsp（用做對話方塊），然後在頁面AddName.jsp裡加上一段js代碼： /*用來開啟對話方塊頁面，注意這回openwindow()函數裡的的方法是window.showModalDialog*/ function openwindow(){ 
         window.showModalDialog("NewBox.jsp",window,"status:no;scroll:no;
dialogWidth:235px;dialogHeight:100px");
       }             /*在NewBox.jsp裡調用這個函數，用來重新整理AddName.jsp*/     function opensub(){
  document.form1.submit();
       }

對window.showModalDialog裡的參數簡單做一下說明： center : yes | no | 1 | 0 | on | off  指定對話方塊是否顯示於案頭正中。預設值為 yes 。
dialogHide : yes | no| 1 | 0 | on | off  指定當列印或預覽列印時對話方塊是否隱藏。僅僅當對話方塊是由被信任的程式開啟的時候此參數才可用。預設值為 no 。
edge : sunken | raised  指定對話方塊視窗邊框樣式為凹下還是凸起的。預設值為 raised 。
resizable : yes | no | 1 | 0 | on | off  指定對話方塊是否可以被使用者改變尺寸。預設值為 no 。
scroll : yes | no | 1 | 0 | on | off  指定對話方塊是否顯示捲軸。預設值為 yes 。
status : yes | no | 1 | 0 | on | off  指定對話方塊是否顯示狀態條。對於不被信任的對話方塊預設值為 yes 。對於被信任的對話方塊預設值為 no 。
unadorned : yes | no | 1 | 0 | on | off  指定對話方塊是否顯示 chrome 樣式邊框。僅僅當對話方塊是由被信任的程式開啟的時候此參數才可用。預設值為 no 。

另外，在NewBox.jsp的javaScript代碼bconfirm()方法中：
<SCRIPT>
      <!--
        function bconfirm(){
          dialogArguments.addNameform.inboxname.value=document.form1.
inboxname.value;
           dialogArguments.opensub();
           window.close();
        }
        function bcancel(){
           window.close();
        }
      -->
    </SCRIPT>

注:addNameform為AddName.jsp中隱藏表單name，使用window.showModalDialog方法是要用dialogArguments傳遞參數。其他部分不變。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
jsp book jsp 6161 jsp editor jsp quiz jsp language jsp tie free jsp hosting
相關文章
動態網頁製作技術JSP頁面顯示亂碼問題的解決
servlet、jsp跳轉(傳值)總結及URL傳參數__js
Spring Boot 最佳實務（二）整合Jsp與生產環境部署
JSP頁面列印
用JSP實現資料庫圖片的儲存與顯示執行個體
用jsp上傳圖片檔案，存貯到欄位類型為blob的流形式代碼

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More