magento2.3 – Magento 2 Resize and drag the modal popup

I would like to use iframe to open a popup with an external site when a custom link is clicked in addtocart.phtml.
I am facing three problems

  • 1> Iframe is loaded as soon as the URL of the external site is dynamic
    will be updated in src after the swatches have been clicked. So I update data URL and
    When the link is clicked, I update src via the data URL

  • 2> How to resize the modal and make it draggable for the customer

  • 3> I capture the product ID and try to get a custom product through Ajax
    Attributes to create this custom link URL that takes 1-2 seconds can be reduced

  • 4> How to create a separate file for these js currently have this script saved in templates

JS

 require(
    (
        'jquery',
        'Magento_Ui/js/modal/modal'
    ),
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            title: "http://magento.stackexchange.com/",
        };

        var popup = modal(options, $('#header-mpdal'));

        $("#checkoutnext").on('click',function(){
            event.preventDefault();
            $('#header-mpdal').on('visible', function() {
                clear()
            });
            $('#customframe').attr("src", "http://magento.stackexchange.com/");
            srcdata = $('#customframe').attr('data-url');
            $('#customframe').attr("src", srcdata);

            $(".videoWrapper").resizable({
                //alsoResize: ".modal-dialog",
                minHeight: 300,
                minWidth: 300
            }).draggable();
            $("#header-mpdal").modal("openModal");
        });

    }

);

shortcut

 " >
            
            

Modal

 

Magento 2.1 Popup Modal