When trying to use the Bootstrap 4 modal in a block it fails to display correctly. It kinda displays the modal but it is still in a "fade in" mode and then you are unable to close the modal - the only way to exit is by refreshing the browser.

```
<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 confrm-cart-box">
                            <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
                            <h3>order confirmation</h3>
                            <br>
                            <br>
                            <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
                            <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
                            <p>We have emailed you the order details for your convenience.</p>
                            <p>If you have any queries please contact us.</p>
                            <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

```

[![enter image description here](https://i.stack.imgur.com/f3Tdy.png)](https://i.stack.imgur.com/f3Tdy.png)
['https://Stackoverflow.com/questions/50211752', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/7378295/']
Add this css in your file in the tag

`<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">` 

It worked for me !
You just have to add the close button. By this code after `<div class='modal-content'>`

```
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
</button>

```

Try this code,

```
<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          <div class="row">
            <div class="col-lg-12 confrm-cart-box">
              <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
              <h3>order confirmation</h3>
              <br>
              <br>
              <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
              <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
              <p>We have emailed you the order details for your convenience.</p>
              <p>If you have any queries please contact us.</p>
              <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>

```

Here is the fiddle,

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="modal fade" id="cartConfirm" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="container">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
          <div class="row">
            <div class="col-lg-12 confrm-cart-box">
              <div class="close-btn" data-dismiss="modal"><i class="fa fa-times"></i></div>
              <h3>order confirmation</h3>
              <br>
              <br>
              <p>Order number <span class="green">123456</span> is now confirmed<br> You can check your order and its progress at any time.<br> By logging into your account</p>
              <a href="#" data-toggle="modal" data-target="#multi-login" data-dismiss="modal">Log In</a>
              <p>We have emailed you the order details for your convenience.</p>
              <p>If you have any queries please contact us.</p>
              <p><span class="green">This order is covered by our 100% No Quibble Money Back Guarantee</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<button data-toggle="modal" data-dismiss="modal" data-target="#cartConfirm">BUY</button>
```

I hope this will help you.