如何删除模态中的x按钮?

时间:2014-08-07 13:04:04

标签: css twitter-bootstrap twitter-bootstrap-3

有没有办法删除模态右上角的关闭按钮(x)?我需要它的原因是模态包含一个强制形式,我不希望用户逃脱它。

哎呀 我没有意识到关闭按钮实际上是在我粘贴的代码中明确添加的

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

我虽然这是模态的一个属性。遗憾

6 个答案:

答案 0 :(得分:9)

您可以删除close按钮标记,并使用data-backdrop="static"data-keyboard="false"属性来阻止用户关闭它...

http://www.bootply.com/43VI44Y3lG

答案 1 :(得分:8)

因为这是x按钮的代码:

<button data-dismiss="modal" class="close" type="button">
    <span aria-hidden="true">×</span>
    <span class="sr-only">Close</span>
</button>

只需使用此css:

.close {display: none;}

答案 2 :(得分:6)

从Bootstrap模态窗口的代码

   <div class="modal fade">
   <div class="modal-dialog">
   <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title">Modal title</h4>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

从代码上方删除行

 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

我认为它已帮助您删除关闭按钮

答案 3 :(得分:0)

我删除了输入类型按钮,解决方案为我工作,删除的代码为:

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

答案 4 :(得分:0)

我在模态内寻找属于.close类的组件,然后将css属性设置为none

模态的

id为myModalId

function hideCloseButton(){
   // get the close button inside the modal
   $('#myModalId .close').css('display', 'none');
}

// finally call the method
hideCloseButton();

答案 5 :(得分:0)

像这样<modal :show-close="false">

使用它