为什么不能修改模态中的隐藏属性?

时间:2019-06-03 04:02:58

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

我在更改模式中的hidden属性时遇到问题,我无法更改其值。

我已经尝试过此代码

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

2 个答案:

答案 0 :(得分:1)

如果要隐藏或显示div,可以尝试以下方法:

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

<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

答案 1 :(得分:0)

如何隐藏, $(“#message1”)。hide();

如何显示, $(“#message1”)。show();