Fatal编程技术网
  • javascript/
  • Javascript 放置引导模式'；s关闭图像上的图标

Javascript 放置引导模式'；s关闭图像上的图标

javascript html css twitter-bootstrap

Javascript 放置引导模式'；s关闭图像上的图标,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我正在页面加载中使用引导模式。我想在图像上放置一个关闭图标。目前我正在使用按钮关闭模式 <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="hfc"> &l

我正在页面加载中使用引导模式。我想在图像上放置一个关闭图标。目前我正在使用按钮关闭模式

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


接近
$（窗口）.load（函数（）{
$（'myModal'）.modal（'show'）；
});
通过这种方式，您可以在图像上进行设置

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

jQuery（文档）.ready（函数（e）{
jQuery（'#mymodal'）。触发器（'click'）；
});

.hfc{
位置：相对位置；
}
.hfc img{
宽度：100%；
}
.结束{
位置：绝对位置；
顶部：5px；
右：5px；
}



启动演示模式
&时代；

您是否尝试将按钮替换为glyphicon？是的，但这是在图像之后而不是图像上方，因此这是Css位置问题。您是否尝试过设置
位置：绝对；顶部：0px；右：0px？