If you want to change the background color of the backdrop for a specific modal, you can access the backdrop element in this way:

$('#myModal').data('bs.modal').$backdrop

Then you can change any css property via .css jquery function. In particular, with background:

$('#myModal').data('bs.modal').$backdrop.css('background-color','orange')

Note that $('#myModal') has to be initialized, otherwise $backdrop is going to be null. Same applies to bs.modal data element.

Easy remedy is to override the default. Just use:

.fade.in {
   background: #000; // or whatever you like
}

$(".modal").on('shown.bs.modal', function() {
  $('.modal-backdrop').css('background', '#00000073');
});

So, I tried these other ways, but there was a VERY slight irritant and that was if you keep the modal-content border radius, in FF and Chrome, there is a slight bit of white trim showing along the borders, even if you use 5px on the modal-header border radius. (standard modal-content border radius is 6px, so 5px on the modal-header border top radius covers some white).

My solution:

.modal-body
{
    background-color: #FFFFFF;
}

.modal-content
{
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: transparent;
}

.modal-footer
{
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
}

.modal-header
{
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
}

!! CAVEAT !!

You must then set the background colors of the modal-header, modal-content, and modal-footer. This is not bad trade-off, because it allows you to do this:

<div class="modal-header bg-primary">

<div class="modal-body bgColorWhite">

<div class="modal-footer bg-info">

EDIT

Or even better:

<div class="modal-header alert-primary">

You need to appy CSS to modal-content class to change background-color.

Add a class name to your modal where you want to apply background color,

<Modal
    show={this.state.show}
    onHide={this.handleClose}
    dialogClassName="modal-90w public-profile-modal-class"
    size='lg'
    aria-labelledby="example-custom-modal-styling-title"
    className="special_modal" //Add class name here
>

Use that class name to apply CSS

.special_modal .modal-content{
   background-color: #000;
   color: #fff;
}

Demo

Rather than changing the colours of all the modals why not add this to an extension CSS file.

.modal-header.primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}

and then add primary to your modal-header thus:

<div class="modal-header primary">

Fiddle is here...

if you are using Bootstrap 4, you could just set the attribute "data-backdrop" in the HTML of the "open modal" button to "false".
e.g. <button data-backdrop="false">Open modal</button>