shibe97 / react-awesome-modal Goto Github PK

How to open modal with ID like Bootstrap modal? I wanna add two modals in a component.

Thank you.

It's a bit of an edge case, but it would be nice if it were possible to specify the opacity of the background so that when one has multiple modals the background does not get black.

First of all, thanks for this useful tool @shibe97!

During my accessibility tests, I can notice that if user is navigating with Tab, even if modal component is invisible, it stills accessible with Tab key.
I think this is a problem for a real accessibility.

My workaround for the moment :

{this.state.visible &&
  <Modal
    visible={this.state.visible}
  ...
}

Edit : the workaround results a loss of the animation. My solution is to play with tabIndex inside Modal component.

I'm getting an error in IE10. Here's is a link to an unadulterated build of the example.
https://s3.amazonaws.com/steveodom/modal-test/index.html

It dies on this.props. in setSize.

Please guide me to scroll and view the overflowed content in the modal...

I am able add scroll bar by adding overlay:'scroll' in panel css which is in "fadeInUp.js"

Is there any other way to add scroll bar, because I don't want to change files in node modules.

Will this be updated to not use componentWillReceiveProps and then hopefully work when React 17 comes out?

Hi,
I am trying to use your modal in my project which uses cerebral.
However when I set the visibility to 0, I get the following error:

Uncaught TypeError: Cannot assign to read only property 'width' of object '#<Object>'
    at Modal.setSize (index.js?4305:78)
    at Modal.componentWillReceiveProps (index.js?4305:54)
    at callComponentWillReceiveProps (react-dom.development.js?cada:9795)
    at updateClassInstance (react-dom.development.js?cada:9974)
    at updateClassComponent (react-dom.development.js?cada:10224)
    at beginWork (react-dom.development.js?cada:10605)
    at performUnitOfWork (react-dom.development.js?cada:12573)
    at workLoop (react-dom.development.js?cada:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:1338)

I have tried setting the width and height of the Modal in various ways, using state and not. I was wondering if you have any ideas on what might be causing this, and how I can resolve it?
Right now the width and height are set like this;

      <Modal
          visible={modalVisibility}
          width={modalWidth}
          height={modalHeight}
          effect="fadeInUp"
          onClickAway={() => closeModal()}
      >
      </Modal>

widht the modalWidth returning "400" and modalHeight returning "300"

First of all, great work!
Is there a future release of the @types, for typescript support?

A good plugin, but not very convenient for changing the design

It would be nice if you added the ability to add a css class

If the modal is within a div that is styled position: fixed; (e.g. within a fixed nav bar), the input and Link elements on the page (not in the nav bar) become unreachable. This may be because height and width of the modal are set to 100% of the page, with no way to alter them. Thus, the react-awesome-modal cannot be placed inside of a div that has its position fixed to the page.

New to using this npm, so it may be user error!

I've made a modal with a max height and scroll.
The datepicker is doing something weird, not staying in placement when scrolling inside the modal.
It gets fixed if I remove "max-height" from my modal, but then the design breaks.

Is it possible to make the datepicker fixed to a specific className or something like that?

Watch the video of the weirdness here:
https://www.dropbox.com/s/9rzmci4nxqpj3jo/weirdscroll.mov?dl=0

Thanks!

At the moment from what I saw in the demo, it looks like the backdrop element is not animated. This makes the appearance sudden despite of the animated entry of the section.

Also, is the leaving animated?

BTW, In my component I tend to use react-motion for all animated appearance and disappearance, this way I don't need to worry about animation at all.

In react v16.1, the style object is frozen and can not be changed.
facebook/react#11520

I'll send you pr later, so please take in if it's okay.

Can you add props for className to overlay and modal wrapper div ?

Is there anyway you can add a listener on the overlay, to close the modal when I click away?