上一篇有自定義提示框，前端 自定義彈出框-提示框（一），這篇推薦一個確認框的實現。

JS預設確認框

確認框 var result=confirm('確認刪除XX檔案？');result為bool型別

回覆確認框 var result=prompt('請輸入檔案標題：');result返回輸入的值

自定義確認框

下文提供一個自定義提示框的案例，通過另一種方案（樣式設定）來實現：

1   <div class="confirmWindow" id="confirmwindow">
2     <div class="body">
3       <div class="content">確認要刪除XX檔案麼？</div>
4       <div class="btns">
5         <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel" onClick="cancelOnClick()">取消</a>
6         <a href="javascript:void(0);" class="btn-confirm" id="btn_ok" onClick="okOnClick()">確認</a>
7       </div>
8     </div>
9   </div>

通過js設定元素的display屬性，來控制提示框的顯示隱藏

以上demo，完整案例請下載：example-MyconfirmDialog

或者訪問github地址：https://github.com/Kybs0/Kybs0HtmlCssJsDemo/tree/master/definedAlertWindow

自定義動態確認框

假如一個頁面有多個業務需要確認框，上面的確認框就顯得程式碼冗餘了。

下面提供一個確認框的元件：

1. 定義彈出框的元件

 安裝動畫過渡元件 ReactCSSTransitionGroup  -- yarn add ReactCSSTransitionGroup

ReactCSSTransitionGroup可以在切換介面時，有一個過渡的視覺效果。

• 在ReactCSSTransitionGroup內部新增彈框內容：提示文字、確認按鈕、取消按鈕。
• 建立一個div容器，並將元件新增到容器中。
• 預設為提示框。如果傳入取消按鈕的文字，則為確認/取消框。

程式碼與前端 自定義彈出框-提示框類似：

 1 import React, { Component } from 'react';
 2 import { is, fromJS } from 'immutable';
 3 import ReactDOM from 'react-dom';
 4 import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 5 import './style.less';
 6 
 7 let defaultState = {
 8   alertStatus: false,
 9   alertContent: '確認/提示',
10   cancelButtonContent: null,
11   okButtonContent: '確認',
12   //關閉彈窗，closeType：1-確認，0-取消
13   closeAlert: function (closeType) { }
14 };
15 
16 class AlertComponent extends Component {
17   state = {
18     ...defaultState,
19   };
20 
21   FirstChild = (props) => {
22     const childrenArray = React.Children.toArray(props.children);
23     return childrenArray[0] || null;
24   };
25 
26   open = (options) => {
27     options = options || {};
28     options.alertStatus = true;
29     this.setState({
30       ...defaultState,
31       ...options,
32     });
33   };
34   // 確認
35   confirm = () => {
36     this.setState({
37       alertStatus: false,
38     });
39     this.state.closeAlert(1);
40   };
41   // 取消
42   cancel = () => {
43     this.state.closeAlert(0);
44     this.setState({
45       alertStatus: false,
46     });
47   };
48   shouldComponentUpdate(nextProps, nextState) {
49     return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState));
50   }
51 
52   render() {
53     return (
54       <ReactCSSTransitionGroup component={this.FirstChild} transitionName="hide" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
55         <div className="alert-container" style={this.state.alertStatus ? { display: 'block' } : { display: 'none' }}>
56           <div className="body">
57             <div className="content">{this.state.alertContent}</div>
58             <div class="btns">
59               <a href="javascript:void(0);" class="btn-cancel" id="btn_cancel" onClick={this.cancel}
60                  style={this.state.cancelButtonContent==null||this.state.cancelButtonContent=='' ? { display: 'none' } : { display: 'block' }}>
61                 {this.state.cancelButtonContent}
62               </a>
63               <a href="javascript:void(0);" class="btn-confirm" id="btn_ok" onClick={this.confirm}>
64                 {this.state.okButtonContent}
65               </a>
66             </div>
67           </div>
68         </div>
69       </ReactCSSTransitionGroup>
70     );
71   }
72 }
73 
74 let div = document.createElement('div');
75 let props = {};
76 document.body.appendChild(div);
77 
78 let AlertBox = ReactDOM.render(React.createElement(AlertComponent, props), div);
79 
80 export default AlertBox;

2. 新增樣式

 1 .alert-container {
 2   position  : fixed;
 3   top       : 0;
 4   left      : 0;
 5   width     : 100%;
 6   height    : 100%;
 7   background: rgba(0, 0, 0, 0.3);
 8   z-index   : 11;
 9 }
10 
11 .alert-container .body {
12   width         : 480px;
13   background    : #fff;
14   border-radius : 6px;
15   border        : 1px solid #ccc;
16   text-align    : center;
17   position      : absolute;
18   top           : 50%;
19   left          : 50%;
20   transform     : translate(-50%, -50%);
21   display       : flex;
22   flex-direction: column;
23   align-items   : center;
24 }
25 
26 .alert-container .body .content {
27   align-self : center;
28   height     : 200px;
29   line-height: 200px;
30   font-size  : 20px;
31   color      : #464646;
32   width      : auto;
33 }
34 
35 .alert-container .body .btns {
36   width          : 480px;
37   height         : 60px;
38   line-height    : 61px;
39   display        : flex;
40   flex-direction : row;
41   align-items    : center;
42   justify-content: center;
43   border-width   : 1px 0 0 0;
44   border-color   : #EEEEEE;
45   border-style   : solid;
46 }
47 
48 .alert-container .body .btns a {
49   background     : inherit;
50   color          : #2CBA5B;
51   font-size      : 20px;
52   display        : inline-block;
53   cursor         : pointer;
54   text-decoration: none;
55   width          : 240px;
56   line-height    : 60px;
57   height         : 60px;
58 }
59 
60 .alert-container .body .btns a.btn-cancel {
61   color       : #666666;
62   border-width: 0 1px 0 0;
63   border-color: #EEEEEE;
64   border-style: solid;
65 }

3. 提示框呼叫

直接複製上面的前端程式碼即可，在本地定義元件。

具體的使用可見下面的案例，刪除版本操作時，彈出確認框，確認後執行相關的操作。

確認code為1，取消code為0。

在open函式中，傳入提示文字、關閉確認框後的函式。

 1   //刪除版本
 2   deleteVersion = record => {
 3     const extensionId=this.state.extensionId;
 4     AlertComponent.open({
 5       alertContent: `確認要刪除版本${record.version}？`,
 6       cancelButtonContent: '取消',
 7       closeAlert: function (closeType) {
 8         if (closeType == 1) {
 9           ExtensionSingle.deleteVersion({ extensionId: extensionId, version: record.version }).then(result => {
10             window.location.reload();
11           });
12         }
13       }
14     });  
15   };

效果圖：