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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25183303/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:27:45  来源:igfitidea点击:

How to remove x button in modal?

csstwitter-bootstraptwitter-bootstrap-3

提问by lowcoupling

is there any way to remove the closing button (x) in the upper right corner of a modal? The reason why i need it is that the modal contains a mandatory form and I do not want the user to escape from it.

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

OoopsI didn't realize the close button was actually explicitly added in the code i pasted

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

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

I though it was an attribute of the modal. Sorry

我虽然这是模态的一个属性。对不起

回答by Zim

You can remove the closebutton markup, and use the data-backdrop="static"and data-keyboard="false"attributes to prevent the user from closing it...

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

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

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

回答by paulalexandru

Since this is the code for x button:

因为这是 x 按钮的代码:

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

Just use this css:

只需使用这个css:

.close {display: none;}

回答by Gautam

From code of Bottstrap modal window

来自 Bottstrap 模态窗口的代码

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

Remove the Line from above Code

从上面的代码中删除行

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

I think it's Helped you for removing close button

我认为这有助于您删除关闭按钮

回答by NuOne

I looked for components inside the modal which belongs to .closeclass then set css property to none

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

id of the modal is myModalId

模态的 id 是 myModalId

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

// finally call the method
hideCloseButton();

回答by Jorge Santos Neill

I deleted the input type button and the solution work for me, the code removed was:

我删除了输入类型按钮,解决方案对我有用,删除的代码是:

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