Reputation: 80

Adding a close button to the middle top edge of the modal

I have a bootstrap modal and I put a slightly overshot button on the edge. Everything looking perfect but I need to center this button.

Another problem is when browser window changed; closing button is stays fixed, button need following to modal.

So When I add to snippet I realized button pulling to bottom;

Here my snippet;

<!doctype html>
<html lang="en">
  <head>
    <title>Orh</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        .modal-default-close {
            margin: 0;
          
            position: absolute;
            top: 200px;
            right: 48%;
            width: 30px;
            height: 30px;
            border-radius: 23px;
            background-color: red;
            color: #ffffff;
            font-size: 40px;
            opacity: 1;
            z-index: 10;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        /* Modal Content */
        .modal-content {

            border-radius: 25px !important;
        }

    </style>

  </head>
  <body>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <button type="button" class="btn modal-default-close" data-dismiss="modal" aria-label="Close"><span
style="  margin-top:-0.21em;"                aria-hidden="true">&times;</span></button>
        <div class="modal-content">
            <div class="modal-body text-center">
                <img src="https://picsum.photos/300/300" class="img-fluid" alt="">
                <h4 class="font-weight-light mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
                <button class="btn btn-success m-3 ">Go</button>
            </div>


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

       <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        $(() => {
            $('#exampleModalCenter').modal('show');
    
    
        })
    </script>
   </body>
</html>

Upvotes: 1

Answers (1)

Ricky Stefano

Reputation: 419

Give the parent position relative and adjust the top and right(i changed it to left) properties. This way your button will be in top center of your modal box regardless the size of the modal or the button itself.

<!doctype html>
<html lang="en">
  <head>
    <title>Orh</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>

        .modal-content {
          position: relative;
        }
   

        .modal-default-close {
            margin: 0;
          
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 23px;
            background-color: red;
            color: #ffffff;
            font-size: 40px;
            opacity: 1;
            z-index: 10;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;

            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);

        }
        /* Modal Content */
        .modal-content {

            border-radius: 25px !important;
        }



    </style>

  </head>
  <body>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <button type="button" class="btn modal-default-close" data-dismiss="modal" aria-label="Close"><span style="margin-top:-0.21em;" aria-hidden="true">&times;</span></button>
            <div class="modal-body text-center">
                <img src="https://picsum.photos/300/300" class="img-fluid" alt="">
                <h4 class="font-weight-light mt-3">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
                <button class="btn btn-success m-3 ">Go</button>
            </div>


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

       <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script>
        $(() => {
            $('#exampleModalCenter').modal('show');
    
    
        })
    </script>
   </body>
</html>

Upvotes: 2

Adding a close button to the middle top edge of the modal

Answers (1)

Related Questions