How to specify parameters to the Dialog component?

[real-ashwin]

I am using this code below.

<Dialog
        title="Approve"
        ref="standardDialog"
        actions={standardActions}
        actionFocus="approve"
        modal={true}
        contentClassName={"approval_dialog"}
        contentStyle={{"paddingTop":"200px", "padding-top":"200px"}}
        contentInnerStyle={{"paddingTop":"200px", "padding-top":"200px"}}
        style={{"paddingTop":"200px", "padding-top":"200px"}}>
          <div className="text-muted">
            lorum ipsum
          </div>
      </Dialog>

modal={true} and modal={false} don't have any effect.
contentStyle, contentInnerStyle and style none of them apply style.

I think I am doing something wrong but I cannot figure out what it is.

Any help?

[hai-cea]

@ashwinputhige What's the problem you're seeing?

[real-ashwin]

After going throught the example again, I changed my Dialog to below code :

var standardActions = [
      { text: 'Cancel' },
      { text: 'Approve', onClick: this.onApprove, ref: 'approve' }
    ];
<Dialog
          title="Title"
          ref="standardDialog"
          actions={standardActions}
          actionFocus="approve"
          modal={true}
          >
            <div >
              TEXT
            </div>
        </Dialog>

@hai-cea The issues I see are :

1. Even with modal={true}, the links in the page under the Dialog are clickable.
2. I cant figure out how to position the Dialog. Its always centered. How do I position it wherever I want - lets say 100px from the top?
3. How do I style the "blackish" mask that the modal places on the page?

Thanks.

[jkruder]

@ashwinputhige 1. is resolved by #1092

[real-ashwin]

Thanks @jkruder

[shaurya947]

@ashwinputhige see #1748 for ideas on how to accomplish 2

Not sure if you're still interested in 3. Let me know and I'll look into it. Closing for now..