Unable to open popup in spfx react

Question

<div className="backdrop" style={this.backdropStyle}>
                  <div className="modal" style={this.modalStyle}>
                    {this.props.children}
                    <div className="footer">
                      <button onClick={e => this._CloseModal(this)}>
                        Close
                      </button>
                    </div>
                  </div>
                </div>
              </div>

Above code in render block .

private backdropStyle = {
position: "fixed",
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: "rgba(0,0,0,0.3)",
padding: 50

};

private modalStyle = {
backgroundColor: "#fff",
borderRadius: 5,
maxWidth: 500,
minHeight: 300,
margin: "0 auto",
padding: 30

};

Error I am getting -

Type '{ position: string; top: number; bottom: number; left: number; right: number; backgroundColor: string; padding: number; }' is not assignable to type 'CSSProperties'. Types of property 'position' are incompatible. Type 'string' is not assignable to type 'PositionProperty'.

Answer 1

At the risk of being an unpopular response, I believe that you should try to use the Dialog control in Office UI Fabric.

Office UI Fabric helps design web parts that are consistent with the rest of Office 365 (and most of Microsoft), which means your web parts look good -- no matter what theme your site uses.

You can find out how to use it at: https://developer.microsoft.com/en-us/fabric#/components/dialog

It takes care of everything for you.