HTML DOM Dialog 對象

Dialog 對象

Dialog 對象是HTML5新增的。

Dialog 對象表示 HTML <dialog> 元素。

注意： 目前只有Chrome Canary，Safari 6 瀏覽器支持 <dialog> 元素。

訪問 Dialog 對象

你可以使用 getElementById() 訪問 <dialog> 元素：

var x=document.getElementById("myDialog");

創建 Dialog 對象

你可以使用 document.createElement() 方法創建 <dialog> 元素：

var x=document.createElement("DIALOG");

Dialog 對象屬性

屬性	描述
open	設置或者返回對話窗口是否打開
returnValue	設置或者返回 dialog 的返回值

Dialog 對象方法

方法	描述
close()	關閉對話窗口
show()	顯示的對話框
showModal()	顯示對話框，并使其成為最頂層的對話框

標準屬性和事件

Dialog 對象同樣支持標準屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

認功能

基本的對話框窗口是一個定位于視區中的覆蓋層，同時通過一個 iframe 與頁面內容分隔開（就像 select 元素）。它由一個標題欄和一個內容區域組成，且可以移動，調整尺寸，默認可通過 'x' 圖標關閉。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 默認功能</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog" ).dialog(); }); </script> </head> <body> <div id="dialog" title="基本的對話框"> <p>這是一個默認的對話框，用于顯示信息。對話框窗口可以移動，調整尺寸，默認可通過 'x' 圖標關閉。</p> </div> </body> </html>

查看演示

動畫

可以通過為 show/hide 屬性指定一個特效來動畫顯示對話框。您必須為想使用的特效引用獨立的特效文件。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 動畫</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); $( "#opener" ).click(function() { $( "#dialog" ).dialog( "open" ); }); }); </script> </head> <body> <div id="dialog" title="Basic dialog"> <p>這是一個動畫顯示的對話框，用于顯示信息。對話框窗口可以移動，調整尺寸，默認可通過 'x' 圖標關閉。</p> </div> <button id="opener">打開對話框</button> </body> </html>

查看演示

基本的模態

模態對話框防止用戶與對話框以外的頁面其他部分進行交互，直到對話框關閉為止。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 基本的模態</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog-modal" ).dialog({ height: 140, modal: true }); }); </script> </head> <body> <div id="dialog-modal" title="基本的模態對話框"> <p>添加模態覆蓋屏幕，讓對話框看起來更突出，因為它讓頁面上其他內容變暗。</p> </div> <p>Sed vel diam id libero <a >rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>

查看演示

模態確認

確認一個動作可能是破壞性的也可能是有意義的。設置 modal 選項為 true，并通過 buttons 選項來指定主要的和次要的用戶動作。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態確認</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog-confirm" ).dialog({ resizable: false, height:140, modal: true, buttons: { "Delete all items": function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); }); </script> </head> <body> <div id="dialog-confirm" title="清空回收站嗎？"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>這些項目將被永久刪除，并且無法恢復。您確定嗎？</p> </div> <p>Sed vel diam id libero <a >rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>

模態表單

使用模態對話框來請求用戶在一個多步驟過程中輸入數據。在內容區域嵌入 form 標記，設置 modal 選項為 true，并通過 buttons 選項來指定主要的和次要的用戶動作。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態表單</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <style> body { font-size: 62.5%; } label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px; margin: 20px 0; } div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; } div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; } .ui-dialog .ui-state-error { padding: .3em; } .validateTips { border: 1px solid transparent; padding: 0.3em; } </style> <script> $(function() { var name=$( "#name" ), email=$( "#email" ), password=$( "#password" ), allFields=$( [] ).add( name ).add( email ).add( password ), tips=$( ".validateTips" ); function updateTips( t ) { tips .text( t ) .addClass( "ui-state-highlight" ); setTimeout(function() { tips.removeClass( "ui-state-highlight", 1500 ); }, 500 ); } function checkLength( o, n, min, max ) { if ( o.val().length > max || o.val().length < min ) { o.addClass( "ui-state-error" ); updateTips( "" + n + " 的長度必須在 " + min + " 和 " + max + " 之間。" ); return false; } else { return true; } } function checkRegexp( o, regexp, n ) { if ( !( regexp.test( o.val() ) ) ) { o.addClass( "ui-state-error" ); updateTips( n ); return false; } else { return true; } } $( "#dialog-form" ).dialog({ autoOpen: false, height: 300, width: 350, modal: true, buttons: { "創建一個帳戶": function() { var bValid=true; allFields.removeClass( "ui-state-error" ); bValid=bValid && checkLength( name, "username", 3, 16 ); bValid=bValid && checkLength( email, "email", 6, 80 ); bValid=bValid && checkLength( password, "password", 5, 16 ); bValid=bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "用戶名必須由 a-z、0-9、下劃線組成，且必須以字母開頭。" ); // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/ bValid=bValid && checkRegexp( email, /^((([a-z]|\d|[!#$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" ); bValid=bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "密碼字段只允許： a-z 0-9" ); if ( bValid ) { $( "#users tbody" ).append( "<tr>" + "<td>" + name.val() + "</td>" + "<td>" + email.val() + "</td>" + "<td>" + password.val() + "</td>" + "</tr>" ); $( this ).dialog( "close" ); } }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { allFields.val( "" ).removeClass( "ui-state-error" ); } }); $( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); }); }); </script> </head> <body> <div id="dialog-form" title="創建新用戶"> <p>所有的表單字段都是必填的。</p> <form> <fieldset> <label for="name">名字</label> <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all"> <label for="email">郵箱</label> <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"> <label for="password">密碼</label> <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"> </fieldset> </form> </div> <div id="users-contain"> <h1>已有的用戶：</h1> <table id="users" class="ui-widget ui-widget-content"> <thead> <tr class="ui-widget-header "> <th>名字</th> <th>郵箱</th> <th>密碼</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john.doe@example.com</td> <td>johndoe1</td> </tr> </tbody> </table> </div> <button id="create-user">創建新用戶</button> </body> </html>

模態消息

使用模態對話框來在下一步動作執行之前確認信息和動作。設置 modal 選項為 true，并通過 buttons 選項來指定主要的動作（Ok）。

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 對話框（Dialog） - 模態消息</title> <link rel="stylesheet" > <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" > <script> $(function() { $( "#dialog-message" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); }); </script> </head> <body> <div id="dialog-message" title="下載完成"> <p> <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span> 您的文件已經成功下載到文件夾中。 </p> <p> 當前使用存儲空間的 <b>36%</b>。 </p> </div> <p>Sed vel diam id libero <a >rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> </body> </html>

下前端屆最火的技術之一莫過于React + Redux + webpack的技術結合。最近公司內部也正在轉react，這周主要做了個React的modal組件，接下來談下具體實現過程。

基本的HTML結構

雖然React基于虛擬DOM，但他的JSX語法還是離不開最基本的HTML。第一步要做的就是通過HTML&&CSS實現Dialog垂直水平居中框。HTML結構如下：

 <div className="m-mask"></div>
 <div className="m-dialog">
 <div className="md-dialog">
 <div className="md-dialog-title">
 <h4>{title}</h4>
 <span className="btn">
 <i className="iconfont">&times;</i>
 </span>
 </div>
 <div className="md-dialog-content">
 {this.props.children}
 </div>
 <div className="md-dialog-foot">
 <a href="#" className="btns">取消</a>
 <a href="#" className="btns btns-blue">確定</a>
 </div>
 </div>
 </div>

ps: JSX語法的className對應于HTML中的class，其次文中的iconfont圖標被換成了×。

然后寫下對應的CSS樣式。此處主要說明一下主要的樣式布局原理，細節略過。

Modal框的背景mask樣式通過position:absolute + top/right/bottom/left:0 + height: 100%實現。

不定寬高的主體內容水平垂直居中的實現通過position:relative + top/left: 50% + translate(-50%, -50%)實現。

React Modal Component

有了已經想好的布局樣式，開始實現最基本的Modal組件。因為需要動態控制組件的顯隱，所以組件的顯隱在內部要通過state方便控制，而其他屬性則通過props實現。modal.js代碼如下：

import React, { Component, PropTypes } from 'react'

const defaultProps={
    show: false,
    title: '',
    zIndex: 1000,
    onOk:=> {},
    onCancel:=> {},
}

const propTypes={
    title: PropTypes.string,
    zIndex: PropTypes.number,
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
}

export default class Modal extends Component {
    constructor(props) {
        super(props)
        this.state={show: props.show}
    }
    render {
        return (
 // JSX語法的HTML
 );
    }
}

Modal.defaultProps=defaultProps
Modal.propTypes=propTypes

不過顯隱內部通過state控制，但父組件還是需要通過props傳遞初始默認值。而且來回調用同一個modal時，父組件是通過props中的show屬性控制。內部的state還是第一次調用時傳入的props值。這樣無法導致及時控制顯隱。此時react的componentWillReceiveProps出場，完美解決這個bug。

俗話說bug是解不完的，雖然上面的組件勉強可以正常使用，但是用于樣式通過絕對定位來做的，無形中導致了另外一個坑，如果Modal的父組件采用了相對或者絕對定位，即影響了Modal組件的定位，就會存在Modal出現在了某個div中，而不是理想的body中。bug復現如下：

unstable_renderSubtreeIntoContainer登場

為了保證我們的組件始終處于body中，采取了ReactDOM中的的這個不太正式的API。語法很簡單：

ReactDOM.unstable_renderSubtreeIntoContainer(parent, component, dom)

parent一般是this，component是Modal，dom是div 代碼實現如下：

export default class extends Component {
    appendMaskIntoDoc {
        ReactDOM.unstable_renderSubtreeIntoContainer(
 this,
 <Modal {...this.props}>
 {this.props.children}
 </Modal>,
 this.container
        )
    }

    componentDidMount {
        this.container=document.createElement('div')
        document.body.appendChild(this.container)
        this.appendMaskIntoDoc
    }

    componentDidUpdate {
        this.appendMaskIntoDoc
    }

    componentWillUnmount {
        document.body.removeChild(this.container)
    }

    render {
        return null
    }
}

API形式

此時，Modal組件已經成功做出來了。父組件可以成功調用，效果如下：

不過，偷偷see了下螞蟻金服官網的Modal組件調用，還有一種API形式的調用。于是也簡單實現了下。這里，簡單說下實現思路吧。

Confirm function內部通過setState方法函數接受的參數傳遞給Modal的父組件dialog，onOk的promise異步回調則是在dialog內部通過處理之后再傳遞給Modal組件。

此處我是通過正則表達式檢測new Promise，如果屬于Promise，則給onOk綁定then，內部調用setState控制Modal的隱藏。不過在調用Confirm function之前，

dialog組件已經被render進ReactDOM中，render之前則需要dom節點，就需要能獲取到document節點。然后手動創建空div節點添加到body中。

此處代碼有點長，省略咯。

在線咨詢

上一篇：Java SpringMVC 支付寶-手機網站支付接
下一篇：秒懂救命貼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML DOM Dialog 對象

基本的HTML結構

React Modal Component

unstable_renderSubtreeIntoContainer登場

API形式

您的項目需求