源码地址 Source address

Demo地址 Demo address

    npm i react-draggable-modal

    yarn add react-draggable-modal

    import { Modal } from 'react-draggable-modal';

    import 'react-draggable-modal/lib/modal.css'; 

	class Business extends React.Components {

		state = {
			modalVisible: false
		}

		render(){
			return <div>
				<Modal 
					onOk={()=>this.save()}
					onCancel={()=>this.quit()}
					visible={this.state.modalVisible}
				>
					当前表单内容有所变化，请问是否需要保存？
				<Modal/>

				<button onClick={()=>this.setState({
					modalVisible: true
				})}>退出</button>
			</div>
		}
	}

    import { Modal } from 'react-draggable-modal';

    import 'react-draggable-modal/lib/modal.css'; 

	class Business extends React.Components {

		save(){
            //此处执行save event
        }

		render(){
			return <div>
				<button onClick={()=>{
                    window.modal.open({
                        children: '当前表单内容有所变化，请问是否需要保存？'
                        mask: false,
                        width: 400,
                        height: 240,
                        onOk:()=>this.save()
                    })
                }}>弹出modal</button>
			</div>
		}
	}

    import modalMethod,{ Modal } from 'react-draggable-modal';

    import 'react-draggable-modal/lib/modal.css'; 

	class Business extends React.Components {

		quit(modalInstance){
			/*
                ...此处执行quit事件,执行完毕后关闭弹窗 
                Execute the quit event here and close the modal 
                after execution Choose one of the three closing 
                methods
            */
                          
            /*方法一：通过创建modal弹窗返回的实例的close方法*/ 
			modalInstance.close();

			/*方法二：通过modal的hideModal方法，参数为modalId*/
			modalMethod.hideModal(modalInstance.modalId); 

			/*方法三：通过modal的hideAllModal方法强制关闭所有弹窗*/
			modalMethod.hideAllModal(); 
		}

		querySave(){
			/* 
                此处展示弹窗并返回一个弹窗实例，用于关闭弹窗
                或是获取Modal的dom（详情请见api说明）
                The modal is shown here, and an instance of modal
                is returned, which is used to close the modal 
                or obtain the dom of modal (see the API 
                description for details)
            */
			let modal = modalMethod.showModal(<Modal
				onOk={()=>this.save(modal)}
				onCancel={()=>this.quit(modal)}
				visible={true} //当使用接口调用时这是必须的
			>
				当前表单内容有所变化，请问是否需要保存？
			<Modal/>)
		}

		render(){
			return <div>		
				<button onClick={()=>this.querySave()}>退出</button>
			</div>
		}
	}

    /**
     * @description 在页面中展示一个弹窗
     * @param modal 弹窗组件 config 配置项
     *      config = {
     *          containerNode: HTMLElement 渲染的根节点的容器,默认是body
     *      }
     * @returns modalInstance: {  
            DOM: HTMLElement modal的dom
            modalId: number 弹窗ID
            close(): void 关闭当前弹窗的方法
        }
     */

    public showModal(modal: JSX.Element, config?): modalInstance

    /**
     * @description 关闭某个指定的弹窗
     * @param modalId 需要关闭的弹窗的id值
     */
    public hideModal(modalId: number): void 

    /**
     * @description 强制关闭所有弹窗以及它们的根节点 force destroy all modal
     */
    public hideAllModal(): void

    /**
    * @description 设置配置项 setting
    * @params IConfig {
            containerNode: HTMLElement 渲染的根节点的容器,默认是body
        }
    */
    public setConfig(config: IConfig): void

    /**
     * @description modal的风格
     * @defaultValue windows
     */
    modalStyle: 'windows' | 'macos'

    /**
     * @description modal是否可见
     * @defaultValue false
     */
    visible: boolean 

    /**
     * @description modal头部是否可见
     * @defaultValue true
     */
    header: boolean

    /**
     * @description modal标题
     */
    title: string | JSX.Element

    /**
     * @description 确认按钮的回调事件
     */
    onOk(): void

    /**
     * @description 取消按钮的回调事件
     */
    onCancel(): void

    /**
     * @description 确认按钮的文字
     */
    okText: string | JSX.Element

    /**
     * @description 取消按钮的文字
     */
    cancelText: string | JSX.Element

    /**
     * @description 弹窗主体的行内样式
     */
    bodyStyle: CSSStyleDeclaration 

    /**
     * @description 弹窗主体额外的类名
     */
    className: string | JSX.Element
 
    /**
     * @description 是否出现底层阴影
     * @defaultValue true
     */
    mask: boolean

    /**
     * @description 弹窗是否可拖动
     * @defaultValue true
     */
    draggable: boolean

    /**
     * @description 是否支持键盘 esc 关闭和 回车键 确认
     * @defaultValue true
     */
    keyboard: boolean

    /**
     * @description modal层级，多层弹窗或method调用时不建议使用 Not recommended!
     */
    zIndex: number
 
    /**
     * @description 弹窗关闭的回调 Callback of modal close
     */
    afterClose(): void
    
    /**
     * @description 弹窗初始宽度 default width
     * @defaultValue 400
     */
    width: number | % | number + px

    /**
     * @description 弹窗初始高度 default height
     * @defaultValue 180
     */
    height: number | % | number + px

    

v2.1.4 优化了代码，减小了包的体积，新增了 mac osx 风格，可通过 modalStyle 属性设置

v2.1.3 现在向左右拖拽至极限的距离会自动全屏显示

v2.1.2 新增 modalMethod.open 方法，现在可以通过 setOption 设置更多的默认属性

v2.1.1 webpack 升级至 5.0+ 版本 包体积变得更小，新增 demo 链接

v2.0.19 添加了.d.ts 文件

v2.0.18 添加了 modal 的色调

v2.0.17 修改了阴影的实现逻辑，现在能够在组件嵌入的使用方式下显示阴影，且不会产生冲突

v2.0.16 移除了 jquery 的依赖，改用原生接口实现

v2.0.15 新增了css的浏览器兼容性处理

...