<p>This is the sample for bootstrap modal with active background.</p>

<span data-toggle="tooltip" title="Watch YTube vidoes!" > <button type="button" class="btn btn-danger rounded-0"  data-toggle="modal" data-target="#smaplemodal" data-backdrop="false">Modal</button> </span>

  <!-- The Modal -->
  <div class="modal custom-modal fade" id="smaplemodal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body">
          Modal body..
        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
.custom-modal{
    /*Places modal center of the page*/
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: fit-content;
		height: fit-content;
		padding: 0 !important;
    /* end */
	}
	
	.modal-dialog{
		margin: 0;
	}
$('.modal-content').draggable().resizable();

$('.modal-content').draggable().resizable();
		$( ".modal-content" ).on( "dragstop", function( event, ui ) {
			$(".custom-modal").css({
				top:  ' calc( ' + $(".custom-modal").css("top") + ' + ' +  $(".modal-content").css("top") + ')'		,
				left: ' calc( ' + $(".custom-modal").css("left") + ' + ' +  $(".modal-content").css("left") + ')'				
			});
			$(".modal-content").css({
				top:  '0px'		,
				left: '0px'				
			});
		} );
		 $("#smaplemodal").on('shown.bs.modal', function () {
            $("body").removeClass("modal-open");			
            $(".custom-modal").removeClass("modal");
		});

External CSS

  1. https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
  2. https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://code.jquery.com/ui/1.12.1/jquery-ui.js
  3. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js
  4. https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js