"data-dismiss" of Bootstrap modal bugding with position="absolute"

Navigation
1

I'm adding a close button by customizing the bootstrap% of%.

I want it on the right of modal , so I gave modal and modified position: absolute and top it.

The problem is that by doing so the button becomes unusable. As far as I can tell, there is a conflict between right (attribute that makes the element close the modal) and data-dismiss: modal .

I've tried other ways to do this "button" like importing a .svg, creating a position: absolute , <button> plus changing <span> to position: absolute . By doing this, only a small portion of the button area becomes the close link and not the entire area. The experience on the mobile and on the desktop is quite unpleasant because it is necessary to press / click several times until you find the correct area, the correct one is the ALL area of the button being a link to close float:right .

Follow the code and a Snippet to get clearer: 

.close-modal {
  position: absolute;
  /* REMOVA O 'POSITION' E O 'BOTÃO' FUNCIONA */
  width: 75px;
  height: 75px;
  background-color: transparent;
  right: 35px;
  top: 25px;
  cursor: pointer
}
.close-modal:hover {
  opacity: .3;
}
.lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #222;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  z-index: 1051;
}
.rl {
  height: 75px;
  width: 1px;
  background-color: #222;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  z-index: 1051;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />



<a href="#modal" class="portfolio-link" data-toggle="modal">
             CHAMAR MODAL    
</a>



<div class="portfolio-modal modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
      <div class="lr">
        <div class="rl">
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <div class="modal-body">

            <p>CONTEÚDO MODAL CONTEÚDO MODAL</p>

            <p>CONTEÚDO MODAL CONTEÚDO MODAL</p>

            <p>CONTEÚDO MODAL CONTEÚDO MODAL</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

How can I fix this?

    
asked by anonymous 16.06.2016 / 16:13

2 answers

0

Enter the z-index property to define order of position elements (relative, absolute, and fixed) 

.close-modal {
    z-index: 1;
}
    
15.08.2016 / 22:02
0

Instead of position:absolute , use float:right , and margin-right and margin-top , instead of right e top .

    
15.08.2016 / 21:21
Communication between forms Error closing ProgressDialog