浮雲雅築: [研究] HTML, CSS, JavaScript, jQuery, jQuery UI, Bootstrap 彈出對話盒視窗

[研究] HTML, CSS, JavaScript, jQuery, jQuery UI, Bootstrap 警告(Alert)、對話盒 (Dialog)、彈出視窗(Popup Window)、彈出對話盒(Popup Dialog)、彈出對話盒視窗(Popup Dialog Window)

2020-11-23

HTML 對話盒視窗因為是平面式而非彈出式，少人用。

CSS 對話盒視窗感覺是平面式的，只是Modal會以區塊覆蓋顯示於其他內容上。

JavaScript 彈出對話盒視窗是比較多人用的。但以 alert()、confirm()、prompt()、windows.open() 較常用，其他較少用，且非每種瀏覽器或版本都支援，有些雖支援，但預設沒有啟用。

jQuery 是用 JavaScript 開發的，沒有特別提供的對話盒。

jQuery UI 需要 jQuery，主要強化 UI ( User Interface，使用者介面) 部分。

BootStrap 3.x 和 4.x 需要 jQuery，但未來推出的 5.x 不需要 jQeury。BootStrapAlert對話盒是平面式而非彈出式，少人用。Bootstrap Modal Plugin 是彈出式的。

比較進階強化的對話盒，混用的 HTML, CSS, JavaScript, jQuery, jQuery UI, Bootstrap 等標準和技術。網路上某些程式範例，可能已經淘汰，或不支援新版的套件，無法正常運作。

********************************************************************************

HTML

HTML <dialog> Tag

https://www.w3schools.com/tags/tag_dialog.asp

HTML 範例：<dialog open>This is an open dialog window</dialog>

(下圖) 直接顯示在網頁上的對話盒視窗，而非彈出式的。

可用下面 JavaScript 操作 (但也可操作非 HTML <dialog> Tag )

HTML DOM Dialog Object，包含 document.getElementById(), document.createElement(), open, close(), show(), showModal() 等。

https://www.w3schools.com/jsref/dom_obj_dialog.asp

********************************************************************************

CSS

W3.CSS Alerts，平面式警告對話盒，其實是使用 w3-panel

https://www.w3schools.com/w3css/w3css_alerts.asp

W3.CSS Modal

https://www.w3schools.com/w3css/w3css_modal.asp

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p>
      </div>
    </div>
  </div>
</div>
            
</body>
</html>

(下圖)看起來像是平面式的對話盒，只是會覆蓋顯示於其他網頁內容上。

********************************************************************************

JavaScript

alert()、confirm()、prompt()

https://www.w3schools.com/js/js_popup.asp

alert()

https://www.w3schools.com/jsref/met_win_alert.asp

****************************************

confirm()

https://www.w3schools.com/jsref/met_win_confirm.asp

****************************************

prompt()

https://www.w3schools.com/jsref/met_win_prompt.asp

****************************************

windows.open()

https://www.w3schools.com/jsref/met_win_open.asp

另外開啟新瀏覽器視窗，載入某址的網頁

****************************************

HTML DOM Dialog Object，包含 document.getElementById(), document.createElement(), open, close(), show(), showModal() 等。

https://www.w3schools.com/jsref/dom_obj_dialog.asp

JavaScript 建立：var x = document.createElement("DIALOG");

JavaScript 存取：var x = document.getElementById("myDialog");

JavaScript，判斷是否開啟(不會實際去開啟)：var x = document.getElementById("myDialog").open;

https://www.w3schools.com/jsref/prop_dialog_open.asp

Dialog close() Method

https://www.w3schools.com/jsref/met_dialog_close.asp

showModal()

https://www.w3schools.com/jsref/met_dialog_showmodal.asp

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>Click the button to show the dialog.</p>
    <button onclick="myFunction()">Show dialog</button>
    <p><b>Note:</b> Use the "Esc" button to close the modal.</p>
    <p><b>Note:</b> The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.</p>
    <dialog id="myDialog">This is a dialog window</dialog>
    <script>
        function myFunction() {
            document.getElementById("myDialog").showModal();
        }
    </script>
</body>
</html>

(下圖)Google Chrome 版本 87.0.4280.66 (正式版本) (64 位元)、Miccrosoft Edge 86

(下圖) IE11

FireFox 83 按下「Show Dialog」按鈕沒有反應。

****************************************

showModalDialog() 和 showModalessDialog() 不是標準，僅某些瀏覽器和版本支援。

********************************************************************************

jQuery UI

jQuery UI 需要 jQuery，主要強化 UI ( User Interface，使用者介面) 部分。

Dialog

https://jqueryui.com/dialog/

官方範例使用的路徑稍作修正如下

Test.htm

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
</div>
 
 
</body>
</html>

(下圖) 執行結果

********************************************************************************

Bootstrap

Bootstrap Alert ( Bootstrap 3 和 4 需要 jQuery，未來Bootstrap 5 不需要 jQuery)

https://www.w3schools.com/bootstrap/bootstrap_alerts.asp

<div class="alert alert-success">

  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Bootstrap Alert 比較不像 JavaScript 傳統 alert()，它不會彈出對話盒或彈出視窗，而是平面文字框，比較像是用 CSS 去達成的。

****************************************

Bootstrap Modal Plugin

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

only supported in Chrome 37+, Safari 6+ and Opera 24+.

<!DOCTYPE html>

<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

(下圖) 對話盒是彈出式的

********************************************************************************

(完)

相關

谷歌,火狐瀏覽器不支援showModalDialog的解決方法

其他 · 發表 2019-02-13

https://www.itread01.com/content/1549994237.html

浮雲雅築

2020年11月23日星期一

[研究] HTML, CSS, JavaScript, jQuery, jQuery UI, Bootstrap 彈出對話盒視窗

沒有留言:

張貼留言

2020年11月23日 星期一

[研究] HTML, CSS, JavaScript, jQuery, jQuery UI, Bootstrap 彈出對話盒視窗

沒有留言:

張貼留言

2020年11月23日星期一