Modal dialog with React

React Modal があるけど、作ってみたのでメモ

jsx

modal(show, contents){
    if(!show){
         return <span></span>;
    }
    return <div className="blind"><div className="dialog-wrapper">{contents}</div></div>;
}

css

.blind {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    text-align:center;
}

.dialog-wrapper{
    position: relative;
    width: 500px;
    height: 800px;
    top: 50px;
    margin: auto auto;
}

• 位置固定で黒背景を表示して、その子としてダイアログとなるコンポーネントを表示するだけ。
• 画面閉じたりするのはkeyDownEventやボタンのイベントハンドラでお好みで
• jQuery UI Dialogでダイアログ表示してみるとReactに「管理外でDOMを変更するな！」と怒られる