I found a workaround for this issue.

Once the modal has been hidden bootstrap data still remains on it. To prevent that I had the following:

$('#myModal').modal('show'); //display something
//...

// if you don't want to lose the reference to previous backdrop
$('#myModal').modal('hide'); 
$('#myModal').data('bs.modal',null); // this clears the BS modal data
//...

// now works as you would expect
$('#myModal').modal({backdrop:'static', keyboard:false});

As per Bootstrap docs:

Clicking on the modal “backdrop” will automatically close the modal.

When backdrop is set to static, the modal will not close when clicking outside it.

Via JS:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

$('#myModal').modal({backdrop: 'static', keyboard: false}, 'show');

Via HTML:

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

Hi @anonymouse703

Which version of Bootstrap are you using?

Try replacing
data-backdrop="static" data-keyboard="false"

with
data-bs-backdrop="static" data-bs-keyboard="false"

post Bootstrap v5, we have to use data-bs-*

I'm using Vue 3 and Bootstrap 5.2.3. I'm trying to show a Modal that I had created and received the exact same error as you did. Here's what the problem was.

Vue has various lifecycle events that can be plugged into to perform actions. Initially I was doing this work in the setup stage:

<script>
import { Modal } from 'bootstrap'
export default {
  name: 'MyModal',
  setup() { <-- Too early
    const myModal = new Modal(document.getElementById('my-modal'), {})
    myModal.show()
  }
}
</script>

The problem is that the Modal has not been loaded into the DOM at this stage and therefore is undefined when the getElementById action is performed. The solution was to wait until the DOM is loaded by using the mounted stage like so:

<script>
import { Modal } from 'bootstrap'
export default {
  name: 'MyModal',
  mounted() { <-- Just right
    const myModal = new Modal(document.getElementById('my-modal'), {})
    myModal.show()
  }
}
</script>

If you're not using Vue the answer should be similar. Perform the getElementById action in an event callback function that fires only after the DOM is loaded for instance DOMContentLoaded

you can try passing in the backdrop option into the modal method

j$('#apvideo').modal({backdrop:'static'});

check the bootstrap modal reference for all the available options

Set the modal's backdrop to static. The modal component has a prop of backdrop, set that to backdrop="static"

<div>
    <Modal show={this.state.show} onHide={this.handleClose} backdrop="static">
        <Modal.Header>
            <Modal.Title>Change Password</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <form className="form-horizontal" style={{margin:0}}>
                <div className='password-heading'>This is the first time you have logged in.</div>
                <div className='password-heading'>Please set a new password for your account.</div>
                <br/>

                <label className="password">Password
                    <input type={this.state.type} className="password__input" onChange={this.passwordStrength}/>
                    <span className="password__show" onClick={this.showHide}>{this.state.type === 'input' ? 'Hide' : 'Show'}</span>
                    <span className="password__strength" data-score={this.state.score}>
                        <div className="strength_string">{this.state.strength}</div>
                    </span>
                </label>
                <br/>
                <label className="password">Confirm Password
                    <input type={this.state.type} className="password__input" onChange={this.passwordStrength}/>
                </label>

            </form>
            <br/>
        </Modal.Body>
        <Modal.Footer>
            <Button onClick={this.submitPassword} disabled={this.state.isDisabled}>Submit</Button>
        </Modal.Footer>
    </Modal>
</div>

From the documentation:

Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked. react-bootstrap

$(document).ready(function(){
    $(".Star-btn").click(function(){
        $("#modal01").css({"display":"block"});
    });
    $(".close").click(function(){
        $("#modal01").css({"display":"none"});
    });

});

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1670;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  padding-bottom: 20px;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: scroll;
  /* Enable scroll if needed */
  overflow-x: hidden;
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}
/* home page special button Content */

.special-content {
  width: 80%;
  height: auto;
  background-color: #CCCCCC;
  margin-left: 10%;
  margin-right: 10%;
  border-radius: 10px;
  display: block;
}
/* The Close Button */

.close {
  position: absolute;
  top: 50px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #755378;
  text-decoration: none;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="Star-btn" href="#" style="text-decoration:none;">Specials</a>

<div id="modal01" class="modal">

  <span class="close">&times;</span>
  <div class="special-content">
    <p id="img01" class="TextHome" alt="">random inforomation.</p>
  </div>

</div>