modal-in-body.js

    var bootstrapModal = {
        bootstrapJs: 'https://ratenkauf.easycredit.de/widget/ratenrechner/v1/bootstrap.min-3.3.5.js',
        modalTemplate: ['<div class="modal fade" tabindex="-1" role="dialog">',
            '<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" style="color:#0066b3;">ratenkauf by easyCredit</h4>',
            '</div>',
            '<div class="modal-body ec-embed-responsive"></div>',
            '</div>',
            '</div>',
            '</div>'
        ].join('\n'),
        checkBootstrap: function () {
            return (typeof $().modal == 'function');
        },
        ensureBootstrap: function (callbackFunction) {
            if (this.checkBootstrap() || window.easycreditBootstrapLoaded) {
                return callbackFunction();
            }
            window.easycreditBootstrapLoaded = true;
            jQuery.ajax({
                url: this.bootstrapJs,
                dataType: 'script',
                success: callbackFunction,
                async: true
            });
        },
        handleModal: function (element, content) {
            var modal = $(this.modalTemplate);
            modal.find('.modal-body').css({
                'height': '560px',
                'max-height': '100%'
            }).append(content);
            $(element).append(modal);
            modal.modal({
                keyboard: false,
                backdrop: 'static'
            }).on('hidden.bs.modal', function () {
                modal.remove();
            });
        },
        init: function (element, content) {
            this.ensureBootstrap(function () {
                this.handleModal(element, content);
            }.bind(this));
        }
    };

         
 bootstrapModal.handleModal = function (element, content) {
    var modal = $(this.modalTemplate);
    modal.find('.modal-body').css({
        'height': '560px',
        'max-height': '100%'
    }).append(content);

    /* append modal to body inside container instead to widget element */
    var container = $('<div id="easycreditExample" class="tb-rk"></div>');
    $(container).append(modal);
    $('body').append(container);

     modal.modal({
        keyboard: false,
        backdrop: 'static'
    }).on('hidden.bs.modal', function () {
        modal.remove();
        container.remove();
    });
};  
         
         
         
         
let options = {
 webshopId: "1.de.8109.1",
 amount:5697.5,
 textVariante: "LANG",
 widgetTemplate:[
 "<div class=\"ec-widget\">",
 "<img class=\"ec-logo\" src=\"https://r2-bike.com/plugins/ws5_easycredit/frontend/img/ratenkauf.svg\" alt=\"easyCredit-Ratenkauf\" />",
 "<div class=\"ec-text\">",
 "<span class=\"ec-text-beschreibung\">%from_text%<\/span>",
 "<span class=\"ec-rate\">%installmentTemplate%<\/span>",
 "<br />",
 "<a class=\"ec-link\">%link_text%</a>",
 "<\/div><\/div>"
 ].join("\n"),
modal: bootstrapModal.init.bind(bootstrapModal),
 };
 $("#easycreditExample").rkPaymentPage(options);