CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-modal
Krys
Krys

Reputation: 829

Position modal centered with floating outside box

I have a bootstrap 4 modal that I wish to display a little different. I want to display a floating box off to the left of the modal.

My question is how can I position both the modal and the floated box in the center of the page, even though the floating box is sitting outside the modal with a position absolute?

This is what it looks like currently, the floated box has a position absolute with a negative left position:

enter image description here

This is how I want it to look like, with the box and modal centered:

enter image description here

I don't know how much I have to modify the modal to do this, as I am hoping to make it responsive as well.

Would anyone have any ideas on how I could achieve this? It would be much appreciated.

Thanks, guys.

.affix-box {
  position: absolute;
  top: -40px;
  left: -100px;
  width: 200px;
  height: 100px;
  background-color: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

      <!-- Modal -->
      <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
          <div class="modal-content">
            <div class="affix-box"></div>
            <div class="modal-header">
              <h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1252

Answers (4)

objectif
objectif

Reputation: 72

May be this will help you 

<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
  #myModal .close{
  display: none;
  }
  </style>

 <script>

$(document).ready(function(){
  $(".btn").click(function(){
     $("#myModal").modal('show');
     $("#myModal2").modal('show');

  });

    $(".close,.close-btn").click(function(){
     $("#myModal").modal('hide');
     $("#myModal2").modal('hide');

  });

});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
 <button type="button" class="btn">Basic</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog" style="right: 50%;">
    <div class="modal-dialog"> 
    <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>

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

    <!-- Modal -->
  <div class="modal fade" id="myModal2" role="dialog"  style="left: 50%;">
    <div class="modal-dialog"> 
    <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default close-btn" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
   <!--/. Modal -->

</div>
</body>
</html>

Upvotes: 0

Abhijit Saxena
Abhijit Saxena

Reputation: 28

In addition to what @Joykal has said, you can also try changing the model size to reduce its width, you can use .modal-sm or .modal-lg class instead of .modal-xl depending on your need 

<div class="modal-dialog modal-dialog-centered modal-xl" role="document">

Upvotes: 0

Joykal Infotech
Joykal Infotech

Reputation: 1876

Here is the simple replacement. instead of top and left i have used transform: translate(-50%, -50%); which sets the center of the floating box on the top left corner of modal.

.affix-box {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: green;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

      <!-- Modal -->
      <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
          <div class="modal-content">
            <div class="affix-box"></div>
            <div class="modal-header">
              <h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Add width: 91%; and left: 9%; to modal-content

.affix-box {
  position: absolute;
  top: -40px;
  left: -100px;
  width: 200px;
  height: 100px;
  background-color: green;
}
.modal-content{
width: 91%;
left: 9%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

      <!-- Modal -->
      <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
          <div class="modal-content">
            <div class="affix-box"></div>
            <div class="modal-header">
              <h5 class="modal-title ml-auto" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions