“数据删除”自举程序模式Bugando，位置=“绝对”

Question

I am adding a close button by customizing the modal bootstrapping.

I want it on the right of modal for that I gave a 'position: absolute or position: fixed and modified the top and right` it.

The problem is that in doing so the button becomes unusable. From what I gather, there is a conflict between the data-dismiss: modal (attribute that makes the element closing the modal) with the 'position: absolute`.

I tried other ways to make such "button" importing a .svg, create a <button> , <span> in addition to changing the position: absolute by float: right . By doing so, only a small portion of the button area becomes the link to close and not the whole area. Experience in mobile and desktop is pretty nasty as it is necessary to press / click several times to find the right area, and the right is ALL button area to be a link to close the modal .

The following code snippet and to become more clear:

 .close-modal { position: absolute; /* REMOVE `POSITION` AND THE BUTTON WORKS */ 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> <script src="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"> CALL 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>CONTENT MODAL CONTENT MODAL</p> <p>CONTENT MODAL CONTENT MODAL</p> <p>CONTENT MODAL CONTENT MODAL</p> </div> </div> </div> </div> </div> </div> 

How I can solve this?

Answer 1

There is some another element stacked on top of your close button. Setting z-index to a high value would make your dismiss button work. This would make the close-modal button at the top and thus clickable. You can do this by:

.close-modal{
  z-index: 1100;
  position: absolute;
  ...
 }