前端自定义确认提示框（二）

上一篇有自定义提示框，前端自定义弹出框-提示框（一），这篇推荐一个确认框的实现。

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属性，来控制提示框的显示隐藏

document.getElementById("confirmwindow").style.display = "inline";

document.getElementById("confirmwindow").style.display = "none";
效果如下：

以上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;

View Code

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 }

View Code

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   };