hide() is not working in loaded modal page-CodePudding

I want to hide a div on the modal, which should be hidden at the start of the modal opening..

This is the div that I want to hidden at first load.

<div id="warning"  style="padding:2px;">
                    <h3  id="warning-text">
                        Ups! Data Donatur Sudah Terdaftar
                    </h3>
                </div>

This is the script I'm using, but the div still shows up..

$(document).ready(function() {
    $('#warning').hide();
});

What is wrong?

CodePudding user response：

You would be better off hiding it with css initially by adding display: none to the style and then showing it with JavaScript when you need it.

<div id="warning"  style="padding:2px; display:none;">
  <h3  id="warning-text">
     Ups! Data Donatur Sudah Terdaftar
  </h3>
</div>

Then in JavaScript using

$('#warning').show();

For context, $(document).ready(function() {}); is called once the entire DOM has been fully loaded, so hiding it here will mean it's visible whilst the page loads and could cause flicker to the user when it is hidden in javascript.