CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MID
MID

Reputation: 1825

How to add image, that overlapping Bootstrap modal?

I want to add close button, that overlapping Bootstrap modal.

Here what I have:

And here what I want to do:

Here is my HTML:

 <div class="sign_up_header">
 <a class="close" data-dismiss="modal">
     <%= image_tag("/images/close_btn.png") %>
 </a>
 </div>

and CSS(tried to add z-index and add top:-5px, but it is hiding behind modal):

  .close{
      display: block;
      position: absolute;
      right:0px;
      top:0px
     }
  #sign_up{
border: 0;
width: 450px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 10px;
}

.sign_up_header{
padding-top:10px;
padding-left: 30px;
 }

CSS from Bootstrap modal:

              .modal {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin: -250px 0 0 -280px;
   overflow: auto;
    background-color: #ffffff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
      border-radius: 6px;
 -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
 -moz-background-clip: padding-box;
      background-clip: padding-box;
     }

As I found in some articles I need to add position:absolute into modal, but if I do that it won't be centered.

How I can do this ?

Upvotes: 1

Views: 1924

Answers (2)

James Cazzetta
James Cazzetta

Reputation: 3220

To achieve the overlapping effect of the close button, do this:

.close {
  display: block;
  position: absolute;
  right:-8px;
  top:-8px
 }

Edit 1

.modal {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin: -250px 0 0 -280px;
   overflow: visible;
   background-color: #ffffff;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding-box;
   background-clip: padding-box;
 }

Upvotes: 1

LeBen
LeBen

Reputation: 2049

After applying @James solution, you have to change the .modal property overflow: auto to overflow: visible to let the button go outside the modal but this can induce unexpected behavior.

Upvotes: 3

Related Questions