圖像內的關閉圖標

我在頁面加載中使用引導模式我想在圖像上放置一個關閉圖標。目前我正在使用一個按鈕關閉模式。圖像內的關閉圖標

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
     <div class="hfc"> 
     <img class="mySlides w3-animate-fading" src="assets/frontend/img/use/1.jpg"/> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

<script type="text/javascript"> 
     $(window).load(function(){   
     $('#myModal').modal('show'); 
     }); 
    </script>

來源

2017-10-16 Sooraj S

設置你只是試圖用glyphicon被替換的按鈕？ – GGO

是的，但也是後來的圖像不在圖像 –

所以這是一個Css位置問題。你有沒有嘗試設置'位置：絕對;頂部：0px;右：0px;'？ – GGO

這樣你可以在圖像

.hfc{ 
    position:relative; 
} 
.hfc img{ 
    width:100%; 
} 
.close{ 
    position:absolute; 
    top:5px; 
    right:5px; 
}

jQuery(document).ready(function(e) { 
 
    jQuery('#mymodal').trigger('click'); 
 
});

.hfc{ 
 
    position:relative; 
 
} 
 
.hfc img{ 
 
    width:100%; 
 
} 
 
.close{ 
 
    position:absolute; 
 
    top:5px; 
 
    right:5px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> 
 
<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.5/js/bootstrap.min.js"></script> 
 

 
<!-- Button trigger modal --> 
 
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     
 
     <div class="modal-body"> 
 
     <div class="hfc"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <img class="mySlides w3-animate-fading" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/> 
 
     </div> 
 
     </div> 
 
    
 
    </div> 
 
    </div> 
 
</div>

來源

2017-10-16 07:51:37 Gattbha

圖像內的關閉圖標

回答

相關問題