Почему скрытый атрибут внутри модального не может быть изменен?

Question

Я столкнулся с проблемой при изменении скрытого атрибута внутри модального окна, я не могу изменить его значение.

Я пробовал этот код

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

Answer 1

Вы можете попробовать это, если хотите скрыть или показать div:

Добавить встроенный стиль в элемент div с идентификатором: 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

Answer 2

как скрыть, $ ("# message1"). Hide ();

как показать, $ ("# message1"). Show ();