【问题标题】:Why hidden attribute inside a modal can't be modified?为什么不能修改模态框内的隐藏属性?
【发布时间】:2019-10-18 15:09:51
【问题描述】:

我在更改模式中的隐藏属性时遇到了问题,我无法更改它的值。

我试过这段代码

function SignUp() {

        $("#regModal").modal('show');
        $('#message1').attr('hidden', true);
        $('#message2').attr('hidden', true);

    }

这是我要修改的模态框内的 div

<div class="modal" id="regModal">
   <div class="modal-dialog">
        <div class="modal-content">
           !-- Modal Header -->
           <div class="modal-header">
               <div id="message1" hidden="false">
                   <div class="alert alert-success">
                     <span class="glyphicon glyphicon-ok"></span>
                       <strong>
                        Success Message!<br />
                        Sent an email to your email address with confirmation <br />
                        link!  please check your inbox <br />
                      </strong>
                   </div>
               </div>
           </div>
        </div>
    </div>
</div>

此代码在第一次单击时有效,但在我使用此代码后,即使我关闭模式并再次打开它,div 也会始终显示。

$('#message1').attr('hidden',false); 

【问题讨论】:

    标签: jquery asp.net-mvc bootstrap-4 modal-dialog bootstrap-modal


    【解决方案1】:

    如何隐藏, $("#message1").hide();

    如何显示, $("#message1").show();

    【讨论】:

    • 我也试过这个,但这对我也不起作用。
    【解决方案2】:

    如果你想隐藏或显示 div,你可以试试这个:

    在id为message1的div元素中添加内联样式

    <div class="modal" id="regModal">
       <div class="modal-dialog">
            <div class="modal-content">
               !-- Modal Header -->
               <div class="modal-header">
                   <div id="message1" style="display:block;">
                       <div class="alert alert-success">
                         <span class="glyphicon glyphicon-ok"></span>
                           <strong>
                            Success Message!<br />
                            Sent an email to your email address with confirmation <br />
                            link!  please check your inbox <br />
                          </strong>
                       </div>
                   </div>
               </div>
            </div>
        </div>
    </div>
    

    jquery:

     $("#message1").attr('style','display: none'); // to hide the div
    

    或者如果您不想添加内联样式,您可以简单地执行以下操作:

    $('#message1').css('display', 'none'); // To hide the div
    

    $('#message1').css('display', 'block'); // To show the div
    

    【讨论】:

    • 感谢这对我来说非常有效:) 我也喜欢没有内联样式的更短的方法。 :)
    • 任何时候 :) @ikey
    猜你喜欢
    • 1970-01-01
    • 2021-07-07
    • 2016-07-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-24
    • 2022-08-14
    • 1970-01-01
    相关资源
    最近更新 更多