前端 自定义确认提示框（二）
唐宋元明清2188 人气:2上一篇有自定义提示框，前端 自定义弹出框-提示框（一），这篇推荐一个确认框的实现。
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/masterhttps://img.qb5200.com/download-x/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 };
效果图：
加载全部内容