Popup embedded on page

[emptycrown]

Hello, I'm having an issue with the Popup rendering embedded on the page, instead of actually popping out.

Am I missing something here? I'm just dropping the component into the render of the larger "Contacts" component, and calling Popup.alert(). I also tried directly rendering it into the page with ReactDOM and document.getElementbyId, as suggested by the docs, but got the same result. Please advise, thanks!

[tbleckert]

The problem is that you need to style the component with external CSS. This is not included in the docs and will change in the near future. When you mount the component you can define a base class, like this:

<Popup className="my-popup" />

By default, the component should be hidden. So add CSS like the following:

.my-popup {
    display: none;
}

When the popup should be visible it gets a modifier class (we're using BEM): my-popup--visible

.my-popup--visible {
    display: block;
}

You can get a full example by looking into the demo site that exists in the gh-pages branch

Sorry for the lack of documentation. Hope this helps and thank you for using our component!

[emptycrown]

Thanks for the response!

I'm using webpack, and thus importing my styles as follows.

import stylescss from '../styles.css';

In my external CSS, I have

.mypopup {
    display: none;
}

.mypopup--visible {
    display: block;
}

I removed the dash because I have to call the styles CSS using

<Popup className={stylescss.mypopup} />

The first CSS seems to be working, as now the Popup does not show up at all. Is there a way to get the modifier class to work with this setup? Thanks!

[tbleckert]

I see. I'm guessing you're using https://github.com/webpack/css-loader ? The problem is that it will output unique/local class names. Maybe there's a way output the CSS the way we want to in this case?

A lot have changed since the first version of the popup was written and we're still relaying on "normal" css. What we want to do is to be more flexible and support pretty much exactly what you displayed above.

Feel free to help out if you want to by submitting a PR. I think the best way to do this is to have an object with class names.

import styles from 'css/popup.css';

const popupClasses = {
    base    : styles.popup,
    visible : styles.popupVisible,
    box     : styles.popupBox
};

<Popup classes={popupClasses} />

Not sure whether or not we should support inline styling but that's another issue.

[w1dea]

Hi,

I modified my popup like this:

<Popup className={this.state.displayPopup ? 'hs-popup-visible': 'hs-popup' } />

and my css is defined as follows:

.hs-popup {
    display: none;
}

.hs-popup-visible {
   display: block;
}

In one of my local functions I have the following code:

   this.setState({
        display_popup: true 
   }); 

   Popup.create({
      title: 'High Speed Graph',
      content: component,
      position: {x: 0, y: 0}
    });

The css works fine, it is hidden until I set display_popup and then the popup displays but I am having the same issue as the original poster, my popup is embedded on the page. Thoughts? Thanks!

[tbleckert]

@w1dea this popup component is not meant to work like that. Whenever you want to display a popup, you use ´Popup.create` (or alert, and so on). The popup component itself should always be visible.

[tbleckert]

Se updated docs for more information, specifically https://github.com/minutemailer/react-popup#basic-styling