Nsryjdtyk

Similar questions like this has been posted before but none solved my issue. I'm trying to get enrollments.php page to show as a modal popup within index.php page

index.php

<button class="sess_btn sess_btn1" id="btn_enrol">Enrollments</button>  

<div id="enrolModal"></div>



<script>

$(document).ready(function() {

    //button modal

    $('#btn_enrol').click(function(){

        //using ajax post

        $.post('enrollments.php',function() {

            $('#enrolModal').html(); //Fill DIV enrolModal with enrollments.php content

        })

    //Calling Modal

    $('#myModal').modal('show');

    })

})

//-------------

</script>

enrollments.php

<!-- The Modal -->

<div id="myModal" class="modal">



  <!-- Modal content -->

  <div class="modal-content">

    <div class="modal-header">

      <span class="close">&times;</span>

      <h2>Modal Header</h2>

    </div>

    <div class="modal-body">

      <p>Some text in the Modal Body</p>

      <p>Some other text...</p>

    </div>

    <div class="modal-footer">

      <h3>Modal Footer</h3>

    </div>

  </div>



</div>

Also, when I try to click on the button several times there are quick blinks on the browser window. Any help will be appreciated, thanks.

Did the corrections in code to use the jquery API correctly. Not tested but, below code will work.

<script>

$(document).ready(function() {

    //button modal

    $('#btn_enrol').click(function(){



        $.post( "enrollments.php", function( htmlContents ) {

          $('#enrolModal').html( htmlContents ); 



          //Show the Modal once you get enrollments.php html contents

          $('#myModal').modal('show');

        });      

    })

})

//-------------

</script>

Thanks for the answer, I got it done a little differently. Instead of a button I used a link as shown.

index.html

<script>

    $(document).ready(function() {              

        $('.li-modal').on('click', function(e){

            e.preventDefault();

            $('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));

        })

    });

</script>



    <a href="enrollments.php" class="li-modal" id="enrol_link" onMouseOver="this.style.background='rgb(0,66,79)'" onMouseOut="this.style.background='#4CAF50'">Enrollments</a>



    <div class="modal fade text-center" id="theModal">

        <div class="modal-dialog">

            <div class="modal-content">

            </div>

        </div>

    </div>   

enrollments.php

<script>

// Get the modal

var modal = document.getElementById('theModal');



// Get the <span> element that closes the modal

var span = document.getElementsByClassName("close")[0];



// When the user clicks on <span> (x), close the modal

span.onclick = function() {

    modal.style.display = "none";

    window.location.href = "updatesession.php";

}



// When the user clicks anywhere outside of the modal, close it

window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = "none";

        window.location.href = "updatesession.php";

    }

}

</script>



    <div id="model-content">

        <div class="modal-header">

          <span id="close" class="close">&times;</span>

          <p>Session Editor</p>

        </div>

        <div class="modal-body">

          <p>Select Session: </p>

        </div>

        <div class="modal-footer">

          <p>Modal Footer</p>

        </div>

    </div>