Bootstrap Modal and Header Animation

Asked by At

I am using Bootstrap's popup modal, but I need my logo to move to the right and next to main menus when the modal is open.

Here is my code, my take on it which does not work.

H. T. M. L.:

<HEADER class="header-area">
<DIV class="container-fluid h-100">
<DIV class="row h-100 align-items-center">
<DIV class="col-12 h-100">
<DIV class="main-menu h-100">
<NAV class="navbar h-100 navbar-expand-lg stroke">
<DIV class="stories"></DIV>
<A class="navbar-brand" id="navbar-brand" href="/">
<ARTICLE id="preg1"><IMG src="files/img/logo.png" /></ARTICLE>
</A>
<DIV class="collapse navbar-collapse" id="studioMenu">
<UL class="navbar-nav ml-auto">
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="1" id="home">HOME</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="2" id="portfolio">WORK</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="3" id="services">SERVICES</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="4" id="blog">BLOG</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="5" id="about">ABOUT</A></LI>
<LI class="nav-item"><A class="nav-link pt-trigger" data-animation="21" data-goto="6" id="contact">CONTACT</A></LI>
</UL>
</DIV>
</NAV>
</DIV>
</DIV>
</DIV>
</DIV>
</HEADER>

H. T. M. L. #2:

<DIV class="details" data-active="n">...</DIV>

This DIV above is inside separate H. T. M. L. file which is A. J. A. X.-loaded in the main Index file.

J. S. #1:

$(".nav-link").click(function(event)
{
    event.preventDefault();
    if($('.details').data("active") == "y")
    {
    $('.details').animate({top: '-=100vh'}, 500, function()
    {
        $("#preg1").animate({"left": "20px"}, 1000);
    });
    $('#close_the_details').fadeOut();
    $("#studioMenu").animate({marginRight: "-=95px"}, 1000);
    $('.details').data("active", "n");
    };
};
$("BODY").on("click", "#close_the_details", function(e) // For the Close button inside the Details panel.
{
    e.preventDefault();
    var dest_left = '20px';
    $('.details').data("active","n");
    $('.details').animate({bottom: '-=100vh'}, 500, function()
    {
    // find the active page if active page is home make logo white
    if( $(".welcome-area .page_wrapper").data("page") == "home")
    {
    $("#preg1 img").attr("src", "img/c_logo/logo.png");
    }
    $("#preg1").animate({"left": dest_left}, 1000);
    $("#studioMenu").animate({ marginRight: "-=95px"}, 1000);
    });
    $('#close_the_details').fadeOut();
    $(".navbar a").css({"color":$('.details').data("backcolor") });
    $(".det-img").attr("src", "");
});
$(".gallery").on("click", ".openBtn", function(e) // This should open Details panel
{
            e.preventDefault();
            var dest_left = $(".logo-container-2").offset().left;
            // console.log(dest_left);
            $("#studioMenu").animate({ marginRight: "+=95px"}, 1000);
            $('.details').data("active","y");
            $('#close_the_details').fadeIn();
            $('.details').animate({
                bottom: '+=100vh'
            }, 500, function()
            {
                $("#preg1").animate({"left": (dest_left-50)});
            });
    });

This script #1 is inside main Index file.

J. S. #2:

(function($) {
    $.loadmodal = function(options) {
        if ($.type(options) == "string") options = {
            url: options
        };
        options = $.extend(true, {
            url: null,
            id: "jquery-loadmodal-js",
            idBody: "jquery-loadmodal-js-body",
            prependToSelector: null,
            appendToSelector: null,
            title: window.document.title || "Dialog",
            width: "400px",
            dlgClass: "fade",
            size: "modal-lg",
            closeButton: true,
            buttons: {},
            modal: {},
            ajax: {
                url: null
            },
            onSuccess: null,
            onCreate: null,
            onShow: null,
            onClose: null
        }, options);
        options.ajax.url = options.ajax.url || options.url;
        if (!options.ajax.url) throw new Error("$().loadmodal requires a url.");
        options.onSuccess = forceFuncArray(options.onSuccess);
        options.onCreate = forceFuncArray(options.onCreate);
        options.onShow = forceFuncArray(options.onShow);
        options.onClose = forceFuncArray(options.onClose);
        $("#" + options.id).modal("hide");
        options.ajax.success = $.isArray(options.ajax.success)? options.ajax.success: options.ajax.success? [options.ajax.success]: [];
        options.ajax.success.unshift(function(data, status, xhr) {
            for (var i = 0; i < options.onSuccess.length; i++) {
                var ret = options.onSuccess[i].apply(null, [data, status,
                    xhr
                ]);
                if (ret === false) return false;
                else if ($.type(ret) === "string") data = ret
            }
            var div = $(['<DIV id="' + options.id + '" class="modal ' + options.dlgClass + ' jquery-loadmodal-js" tabindex="0" role="dialog" aria-labeledby="' + options.id + '-title">', '<DIV class="modal-dialog ' + options.size + '" role="document">', '<DIV class="modal-content">', '<DIV class="modal-header">', options.closeButton? '<BUTTON class="close" data-dismiss="modal" type="button" id="zatvori_detalje"><I class="pe-7s-close" aria-hidden="true"></I></BUTTON><DIV class="logo-container-2"></DIV>':"", '<H4 id="' + options.id + '-title" class="modal-title">' + options.title + "</H4>", "</DIV>", '<DIV id="' + options.idBody + '" class="modal-body">', "</DIV>", "</DIV>", "</DIV>", "</DIV>"
            ].join("\n"));
            if (options.appendToSelector && !options.prependToSelector) $(options.appendToSelector).append(div);
            else $(options.prependToSelector || "body").prepend(div);
            div.find(".modal-body").html(data);
            div.find(".modal-dialog").css("width", options.width);
            if (!$.isEmptyObject(options.buttons)) {
                div.find(".modal-body").append('<DIV class="button-panel"></DIV>');
                var button_class = "btn btn-primary";
                $.each(options.buttons, function(key, func) {
                    var button = $('<BUTTON class="' + button_class + '">' + key + "</BUTTON>");
                    div.find(".button-panel").append(button);
                    button.on("click.button-panel", function(evt) {
                        var closeDialog = true;
                        if (func && func(evt) === false) closeDialog = false;
                        if (closeDialog) div.modal("hide")
                    });
                    button_class = "btn btn-default"
                })
            }
            for (var i = 0; i < options.onCreate.length; i++)
                if (options.onCreate[i].apply(div.get(0), [data, status, xhr]) === false) return false;
            div.on("shown.bs.modal",
                function(event) {
                    if (div.find("[autofocus]").length > 0) div.find("[autofocus]").get(0).focus();
                    else if (div.find(".modal-body").find(":input:enabled:visible").length > 0) div.find(".modal-body").find(":input:enabled:visible").get(0).focus();
                    else if (options.CloseButton) div.find(".close").get(0).focus()
                });
            div.on("shown.bs.modal", function(event) {
                for (var i = 0; i < options.onShow.length; i++) options.onShow[i].apply(div.get(0), [event])
            });
            div.on("hidden.bs.modal", function(event) {
                for (var i = 0; i < options.onClose.length; i++) options.onClose[i].apply(div.get(0), [event]);
                div.removeData();
                div.remove()
            });
            $(".modal-content").imagesLoaded(function() {
                div.modal(options.modal)
            })
        });
        var promise = $.ajax(options.ajax);
        $.extend(promise, {
            create: function(func) {
                options.onCreate.push(func);
                return this
            },
            show: function(func) {
                options.onShow.push(func);
                return this
            },
            close: function(func) {
                options.onClose.push(func);
                return this
            }
        });
        return promise
    };

    function forceFuncArray(ar) {
        if (!ar) return [];
        if ($.isArray(ar)) return ar;
        return [ar]
    }
})(jQuery);

This script #2 is external source.

This method opens the Modal (Details panel) and adds the functional Close button, but it will not animate the logo nor the main menus when the Modal is open.

0 Answers