mask

ShadowEditor.UI/src/editor/viewport/Viewport.jsx

@@ -65,7 +65,7 @@ class Viewport extends React.Component {
     render() {
         return <>
             <Canvas className={'Viewport'} ref={this.canvas}></Canvas>
-            <Window title={'Message'}>
+            <Window title={'Message'} mask={false}>
                 <Content>
                     Welcome to use ShadowEditor!
                 </Content>

ShadowEditor.UI/src/window/Window.jsx

@@ -26,7 +26,7 @@ class Window extends React.Component {
     }
 
     render() {
-        const { className, style, title, children, width, height } = this.props;
+        const { className, style, title, children, width, height, mask } = this.props;
 
         const content = children.filter(n => {
             return n.type === Content;
@@ -43,7 +43,7 @@ class Window extends React.Component {
             height: height,
         });
 
-        return <div className={classNames('Window', this.state.hidden && 'hidden', className)} style={_style}>
+        const box = <div className={classNames('Window', this.state.hidden && 'hidden', className)} style={_style}>
             <div className={'wrap'}>
                 <div className={'title'}>
                     <span>{title}</span>
@@ -59,6 +59,8 @@ class Window extends React.Component {
                 </div>
             </div>
         </div>;
+
+        return mask ? <div className={'WindowMask'}>{box}</div> : box;
     }
 }
 
@@ -70,6 +72,7 @@ Window.propTypes = {
     width: PropTypes.string,
     height: PropTypes.string,
     hidden: PropTypes.bool,
+    mask: PropTypes.bool,
 };
 
 Window.defaultProps = {
@@ -80,6 +83,7 @@ Window.defaultProps = {
     width: '600px',
     height: '400px',
     hidden: false,
+    mask: true,
 };
 
 export default Window;

ShadowEditor.UI/src/window/css/Window.css

@@ -1,7 +1,17 @@
-.Window {
+.WindowMask {
     position: fixed;
     left: 0;
     top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 900;
+}
+
+.Window {
+    position: absolute;
+    left: 0;
+    top: 0;
     width: 600px;
     height: 400px;
     padding: 0px 5px 5px;