Modal Styling for ImpSdk.social.showSharePopup

written by Timmy Luong

By default the modal is already styled. This section can be ignored if you are using the modal's default style.

Click here to go back to the main ImpSdk.showSharePopup page.

Warning: Styling the modal must be done by trial and error. There is no built-in support for error-checking the style properties and values. Passing in incorrect style properties and values may result in undesired appearance and behavior of the modal.

There are 2 ways to customize the modal's styles:

• Recommended: pass in the style as an object parameter to ImpSdk.social.showSharePopup
• NOT recommended: an external stylesheet -- note: you MUST flag all of your css values with the !important flag. Go to detailed explanation.

ImpSdk.social.showSharePopup(options, styles, targets)

styles is an object with two inner objects: overlay and content

var styles = {
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    zIndex: 9999,
  },
  content: {
    position: 'fixed',
    margin: 'none',
    top: '40%',
    left: '40%',
    right: '0px',
    bottom: '0px',
    border: '2px solid black',
    borderRadius: '0px',
    overflow: 'auto',
    padding: '8px',
    width: '292px',
    height: '240px',
    backgroundColor: 'white',
  }
};

overlay: The area outside the modal's content box. Has properties:

content: The modal's content box. Has properties:

The modal's style can be set using an external stylesheet, however, you will be required to use the !important flag for every single style property which will break the natural CSS cascading of all of your stylesheets. This method is not recommended. See Mozilla's documentation on the concept of Specificity and the !important flag.

• All React modal overlays have the attribute class="ReactModal__Overlay".
• ImpSdk.social.showSharePopup does not have an attribute class for the overlay.
• All React modal content boxes have the attribute class="ReactModal__Content".
• All ImpSdk.social.showSharePopup content boxes have the attribute class="shareIt__modal"

Note the !important flags everywhere in this example:

/* my-stylesheet.css */

.shareIt__modal {
  background-color: orange !important;
}

.ReactModal__Overlay {
  background-color: rgba(0,0,0,1) !important;
}

.ReactModal__Content {
  width: 500px !important;
  height: 500px !important;
}