[英]bootstrap javascript how to hide a div in a modal window
I have a bootstrap modal window and I want to hide a div element using javascript. 我有一个引导模态窗口,我想使用JavaScript隐藏div元素。
The bootstrap window is 引导窗口是
<div class="modal hide editdialog" id="edit-dialog" data-backdrop="static" style="margin-top: -370px">
<div class="modal-header">
<div style="float: right; margin-right: 2px">
<a id="maximizebuttoneditor" href="#" onclick="maximizeEditor()" rel="tooltip" title="<spring:message code="label.Maximize" />"><i class="icon icon-fullscreen"></i></a>
<a id="restoredownbuttoneditor" style="display: none" href="#" onclick="restoreDownEditor()" rel="tooltip" title="<spring:message code="label.RestoreDown" />"><i class="icon icon-resize-small"></i></a>
</div>
<span id="edit-dialog-title"><spring:message code="label.Edit" /></span>
</div>
<div class="modal-body" style="max-height: 610px; height: 610px;">
<ul class="nav nav-tabs" id="edit-dialog-tabs">
<li><a href="#general" data-toggle="tab"><spring:message code="label.General" /></a></li>
<li id="question-dialog-advanced-tab"><a href="#advanced" data-toggle="tab"><spring:message code="label.Advanced" /></a></li>
<li><a href="#dependencies" data-toggle="tab"><spring:message code="label.Dependencies" /></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="general" >
<div style="margin-top: 20px;" class="general-regex-dialog-questions" id="general-regex-dialog-questions">
<span class="overview-label"><spring:message code="label.RegEx" /></span><br />
<input id="question-dialog-regex" type="text" maxlength="255" />
<span id="question-dialog-regex-invalid" class="validation-error hide"><spring:message code="validation.NoRegExPattern" /></span>
</div>
</div>
<div class="tab-pane" id="advanced">
</div>
<div class="tab-pane" id="dependencies">
</div>
</div>
</div>
<div class="modal-footer">
<a id="btnEditOk" onclick="updateSurvey();" class="btn btn-info"><spring:message code="label.OK" /></a>
<a id="btnEditCancel" class="btn" onclick="selectedElement = null;$('#edit-dialog').modal('hide');"><spring:message code="label.Cancel" /></a>
</div>
</div>
I want to hide the div general-regex-dialog-questions
我想隐藏div general-regex-dialog-questions
I use the following javascript code 我使用以下JavaScript代码
$("#general-regex-dialog-questions").css({"display": "none !important"});
The div element isn't hidden. div元素未隐藏。
I dont't understand why. 我不明白为什么。
Maybe because it is inside the modal. 可能是因为它位于模态内部。
You can try it like this: 您可以这样尝试:
$(window).ready(function(){
$("#edit-dialog").find("#general-regex-dialog-questions").hide();
//or
$("#edit-dialog").find("#general-regex-dialog-questions").css({"display": "none"});
});
Hope it will help. 希望它会有所帮助。
This syntax {"display": "none !important"} doesn't work because of the !important. 由于!important,此语法{“ display”:“ none!important”}不起作用。
If you leave out the !important it works fine. 如果您忽略!important,它会很好地工作。
However, if you want to set the importance as well, you can set it like this: 但是,如果您也想设置重要性,则可以这样设置:
$( '.foo' ).each(function () {
this.style.setProperty( 'display', 'none', 'important' );
});
To hide an element using jquery, you should use the .hide()
method. 要使用jquery隐藏元素,应使用.hide()
方法。 If you want to show it back use .show()
. 如果要显示回去,请使用.show()
。
If you might switch beetween the two you could also use .toggle()
that will alternate the state (hidden/visible). 如果您可能会在这两者之间切换,也可以使用.toggle()
来改变状态(隐藏/可见)。
If it's still not working, try printing something when calling your event function to make sure your .hide() is called or print out the result of the selection $("#...")
如果仍然无法正常工作,请在调用事件函数时尝试打印一些内容,以确保已调用.hide()或打印出选择$("#...")
$("#test").click( function(e){ $("#test").hide(); } ); function show() { $("#test").show() }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1> Title </h1> <button onclick="show()">Show it back</button> <div id="test" style="background-color: #CCC"> <h2>Bunch of stuff</h2> <p>Blabla blabla blabla <br> Click on me to make me disappear </p> <span> I'm a span and I dissapear too </span> </div> <p> Bunch of stuff that will not disappear neither </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.