“數據刪除”自舉程序模式Bugando，位置=“絕對”

Question

我通過自定義modal自舉添加了一個關閉按鈕。

我希望它在modal右邊，因為我給了它一個“位置：絕對位置or位置：固定and modified the頂部and右側”。

問題在於這樣做時按鈕變得不可用。 據我所知， data-dismiss: modal （屬性使元素關閉模態）與“位置：絕對”之間存在沖突。

我嘗試了其他方法來使這樣的“按鈕”導入.svg，除了更改position: absolute通過float: right來創建<button>和<span> 。 這樣，只有一小部分按鈕區域成為關閉鏈接，而不是整個區域。 在移動和台式機上的體驗非常討厭，因為必須按/單擊幾次才能找到合適的區域，而右邊的“全部”按鈕區域是關閉modal的鏈接。

下面的代碼片段將變得更加清晰：

 .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> 

我該如何解決？

Answer 1

關閉按鈕上方還有一些其他元素。 將z-index設置為較高的值將使您的關閉按鈕起作用。 這將使模式關閉按鈕位於頂部，因此可以單擊。 您可以通過以下方式做到這一點：

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