How to disable fading out of Boostrap 5 Modal while keeping the fade in animation active?-CodePudding

I know how to remove the fade animation of a Modals by removing the "fade" class in the parent div. But I need to keep the FADE IN animation while getting rid of the FADE OUT one.

Any ideas?

CodePudding user response：

you can make it works by putting the following CSS in your custom CSS file.

.modal.fade {
    transition: opacity 0s linear 0s;
}
.modal.fade.show {
    transition: opacity 0.15s linear 0s;
}

here is the working code snippet please review it once.

.modal.fade {
    transition: opacity 0s linear 0s;
}
.modal.fade.show {
    transition: opacity 0.15s linear 0s;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>

  <div >
    <button type="button"  data-bs-toggle="modal" data-bs-target="#myModal">
    Open modal
  </button>
  </div>

  <!-- The Modal -->
  <div  id="myModal">
    <div >
      <div >

        <!-- Modal Header -->
        <div >
          <h4 >Modal Heading</h4>
          <button type="button"  data-bs-dismiss="modal"></button>
        </div>

        <!-- Modal body -->
        <div >
          Modal body..
        </div>

        <!-- Modal footer -->
        <div >
          <button type="button"  data-bs-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>


</body>

</html>