Window Modal does not work

Hello.

I'm setting up a CRUD. At the end of some routines, INSERT, EDIT etc I want you to either show a success message or not. I thought about using MODAL BOOTSTRAP.
1- I have already inserted all the .js files in the header.htmk file
2- I already put jquery.min.js before bootstrap.min.js
3- I also inserted bootstrap-modal.js
4- I already inserted this code, at the end and at the beginning of the screen that I want to show the MODAL:
<script type = "text / javascript">
     $ (window) .load (function () {$ ('# myModal'). modal ('show');
      });
</ script>
5- I have already put this code instead of the code above:

$ (document) .ready (function () {
   $ ('# myModal'). modal ('show');
});
 In the model I do the INSERTS, UPDATES and DELETES, and after that I call a view to give a message. I was using a very beginner model:
<div class = "alert alert-success" role = "alert">
<? php $ msg; ?>
</ div>
And I decided to try the MODAL.
But it does not work.

@RRIOS,

Why is there a space between # and myModal? Shouldn't it be #myModal instead?

Code:

Spaces all over the code.

<script type = "text / javascript">

$ (window) .load (function () {$ ('# myModal'). modal ('show');

</ script>

<? php $ msg; ?>

</ div>

You need top remove the spaces on these.

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

Code:

Sorry, but that space appeared when I gave ctr + c ctrl + v. Within my PHP code there is no such space.

Spaces all over the code.

<script type = "text / javascript">

$ (window) .load (function () {$ ('# myModal'). modal ('show');

</ script>

<? php $ msg; ?>

</ div>

You need top remove the spaces on these.

@RRIOS,

Why is there a space between # and myModal?  Shouldn't it be #myModal instead?

Sorry, but that space appeared when I gave ctr + c ctrl + v. Within my PHP code there is no such space.

"But it does not work." What is happening, is the window not showing or is the window showing without the content?

I have had problems with modal windows in the past with z-index problems and with conflicts with other parts of my css (off-canvas elements overriding the normal modal operations). If you hard code a modal onto the page you are working on, does it show properly?

"But it does not work." What is happening, is the window not showing or is the window showing without the content?

I have had problems with modal windows in the past with z-index problems and with conflicts with other parts of my css (off-canvas elements overriding the normal modal operations). If you hard code a modal onto the page you are working on, does it show properly?

Does not run. Nothing appears on the screen. 
SPA, with side menu. When I click on Students for example, the student listing appears. And when I click on the edit or new, I open a new page. On this page I have 2 buttons to record. And the idea was to have this MODAL WINDOW come up. And what I did to do this test that you suggested: when I click on the "DISCIPLINES" menu link instead of listing data from the database, I called this modal window.
The window is not showing.

Code:

<div class="modal fade" id="myModal">
     <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <h4 class="modal-title">My Modal</h4>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">×</span>
                   </button>
               </div>
               <div class="modal-body">
                   ...
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
               </div>
           </div>
     </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
  $('#meuModal').modal('show');
});
</script>

Attached Files

Thumbnail(s)
       

@RRIOS,

In your javascript you have '#meuModal' instead of '#myModal'

@RRIOS,

In your javascript you have '#meuModal' instead of '#myModal'

I changed ... did not show the window.

Code:

<div class="modal fade" id="myModal">
     <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <h4 class="modal-title">My Modal</h4>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">×</span>
                   </button>
               </div>
               <div class="modal-body">
                   ...
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
               </div>
           </div>
     </div>
</div>
<script>
$(document).ready(function(){
  $('#myModal').modal('show');
});
</script>

Is the modal window called?
$('#myModal').on('show.bs.modal', function (event) {
     console.log('myModal show~~~~~~~');
})
$('#myModal').modal();

If the call does not work 
<script>
$(document).ready(function(){
    function on_ready() {
        $('#myModal').on('show.bs.modal', function (event) {
            console.log('myModal show~~~~~~~');
        })
        $('#myModal').modal();
    }
    on_ready();
});
</script>

If called, Test it with the following code
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
https://getbootstrap.com/docs/3.4/javascript/#modals

Good luck~