How can I convert this Script that it loads an ajax page rather than the modal div?

Question

How can I convert this Script that it loads and unloads an ajax page rather than the modal div? Lets say name of page is about.html.

    $('#modal-about-open').on('click', function(e) {
        var mod = $('#main'),
            modal = $('#modal-about');
            mod.animate({ opacity: 0 }, 400, function(){
            $('html,body').scrollTop(0);
            modal.addClass('modal-active').fadeIn(400);
        });
        e.preventDefault();

        $('.modal-close').on('click', function(e) {
            modal.removeClass('modal-active').fadeOut(400, function(){
                mod.animate({ opacity: 1 }, 400);
            });
            e.preventDefault();
        });
    });

You can try something like this https://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get — designtocode, Feb 28 '19 at 13:10

score 1 · Accepted Answer · answered Feb 28 '19 at 14:42

1

To load the about.html in your #modal-about div when it opens:

$('#modal-about-open').on('click', function(e) {
        var mod = $('#main'),
            modal = $('#modal-about');
            mod.animate({ opacity: 0 }, 400, function(){
            $('html,body').scrollTop(0);
            //ajax call
            $.ajax({
               url: "about.html",
               success: function(result){
                  $("#modal-about").html(result); //print the received data into modal
            }});

            modal.addClass('modal-active').fadeIn(400);
        });
        e.preventDefault();
//....

answered Feb 28 '19 at 14:42

Edoardo Lobbiani

301
2
7

Thanks Eduardo. However this did not work. It seems to be doing something but not loading the about.html instead it is loading a white blank modal. – Savaş Zorlu Feb 28 '19 at 15:02
I got it to work.. I had to empty the modal-about div on index.html.. Once I did that it worked like a charm. But close function is not working now. do you have any suggestions on that? – Savaş Zorlu Feb 28 '19 at 15:12
1

Sorry for late answer. If .modal-close button is loaded about.html, you must do bindings `$('.modal-close').on('click', function(e) { ...` after loading complete. So put thai inside `success: function(result){ ...}` – Edoardo Lobbiani Apr 26 '19 at 08:51

How can I convert this Script that it loads an ajax page rather than the modal div?

1 Answers1