# Mask 遮罩层 Demo

* order: 1
* hide: true

Mask 模拟浮层效果

---

```js
/** @jsx createElement */
import { Input, View, Text, Env, Checkbox, Button, Mask, Page } from 'weex-nuke';
import { createElement, Component, render } from 'rax';
const { isWeb } = Env;
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.GroupFruit = [
      { value: 'zj', label: '浙江' },
      { value: 'ah', label: '安徽' },
      { value: 'sh', label: '上海' }
    ];
    this.state = {
      fruitChecked: ['ah']
    };
  }
  showMask() {
    this.refs.myMask.show();
  }
  hideMask() {
    this.refs.myMask.hide();
  }

  onChange = value => {
    this.setState({
      fruitChecked: value
    });
  };
  render() {
    return (
      <Page title="Mask">
        <Page.Intro main="event" />
        <View style={{ height: 600, backgroundColor: 'yellow' }}>
          <Button type="primary" onPress={e => this.showMask()}>
            open mask
          </Button>
        </View>
        <View style={{ height: 600, backgroundColor: 'blue' }}>
          <Button
            type="primary"
            onPress={e => {
              alert(1234);
            }}
          >
            click
          </Button>
        </View>

        <Mask
          defaultVisible={false}
          ref="myMask"
          animate={true}
          style={styles.mask}
          contentStyle={styles.body}
        >
          <Text style={styles.text}>hi im in footer</Text>
        </Mask>
      </Page>
    );
  }
};
const styles = {
  mask: {
    // bottom: 0,
    top:
      (Math.round(screen.height / window.devicePixelRatio) - 100).toString() +
      'wx', //works in iOS,not in android
    // top:
    //   Math.round(screen.height / window.devicePixelRatio - 70).toString() +
    //   'wx',
    backgroundColor: 'red',
    height: '70wx',
    width: 750,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },

  text: {
    fontSize: 28,
    color: '#ffffff'
  }
};
render(<App />);
```