Window Modal does not work - Printable Version +- CodeIgniter Forums (https://forum.codeigniter.com) +-- Forum: General (https://forum.codeigniter.com/forumdisplay.php?fid=1) +--- Forum: Lounge (https://forum.codeigniter.com/forumdisplay.php?fid=3) +--- Thread: Window Modal does not work (/showthread.php?tid=73807) Pages:
1
2
|
Window Modal does not work - RRIOS - 06-08-2019 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. RE: Window Modal does not work - php_rocs - 06-08-2019 @RRIOS, Why is there a space between # and myModal? Shouldn't it be #myModal instead? RE: Window Modal does not work - InsiteFX - 06-09-2019 Code: Spaces all over the code. You need top remove the spaces on these. RE: Window Modal does not work - RRIOS - 06-09-2019 (06-09-2019, 03:05 AM)InsiteFX Wrote: RE: Window Modal does not work - RRIOS - 06-09-2019 (06-08-2019, 08:42 PM)php_rocs Wrote: @RRIOS, Sorry, but that space appeared when I gave ctr + c ctrl + v. Within my PHP code there is no such space. RE: Window Modal does not work - PaulD - 06-09-2019 "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? RE: Window Modal does not work - RRIOS - 06-10-2019 (06-09-2019, 08:22 AM)PaulD Wrote: "But it does not work." What is happening, is the window not showing or is the window showing without the content? 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"> RE: Window Modal does not work - php_rocs - 06-10-2019 @RRIOS, In your javascript you have '#meuModal' instead of '#myModal' RE: Window Modal does not work - RRIOS - 06-10-2019 (06-10-2019, 08:23 AM)php_rocs Wrote: @RRIOS, I changed ... did not show the window. Code: <div class="modal fade" id="myModal"> RE: Window Modal does not work - hamanalda - 06-10-2019 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">×</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~ |