Интеграция iFrame

1)     Подключить jQuery

2)     Добавить кнопку с классом buttonShowWiget
<img src="https://sx24.ru/CalcShoes/assets/widget/ButtonOpenWidget.png&quot; class="buttonShowWiget" >

3)     Добавить блок фона с классом bgWiget
<div class="bgWiget" style="display: none"></div>

4)     Добавить кнопку закрытия c классом closeButtonWiget
<div class="closeButtonWiget" style="display: none">&#215;</div>

5)     Добавить фрейм с ссылкой на виджет и классом stickWiget
<iframe src="https://sx24.ru/CalcShoes/assets/widget/ForIFrame.html?VendorCode=Master_8_CTAS&amp;Sex=#&quot; frameborder="0" class="stickWiget" style="display: none"></iframe>

6)     Добавить стили

<style>
    .buttonShowWiget{
        cursor: pointer;
    }
    .bgWiget{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black ;
        opacity: 0.5;
        z-index: 999;
        position: fixed;
    }
    .stickWiget {
        position: absolute;
        width: 800px;
        min-height: 1200px;
        left: 50%;
        margin-left: -400px;
        z-index: 9999;
        top: 5%;
    }

    .closeButtonWiget{
        position: absolute;
        z-index: 99999;
        top: 10%;
        color: black;
        cursor: pointer;
        left: 50%;
        margin-left: 350px;
        font-size: 30px;
    }
@media screen and (max-width: 800px) {
    .stickWiget {
        position: absolute;
        width: 400px;
        min-height: 1300px;
        left: 50%;
        margin-left: -200px;
        z-index: 9999;
        top: 5%;
    }
    .closeButtonWiget{
        position: absolute;
        z-index: 99999;
        top: 10%;
        color: black;
        cursor: pointer;
        left: 50%;
        margin-left: 150px;
        font-size: 30px;
    }
}
</style>

7)    Добавить скрипт обработки событий отображения и закрытия виджета

<script>
    $(function () {
        $(document).on('click', '.buttonShowWiget', function () {
            $('. bgWiget).css('display', 'block');
            $('.stickWiget').css('display', 'block');
            $('.closeButtonWiget').css('display', 'block');
        })
        $(document).on('click', '.closeButtonWiget', function () {
            $('. bgWiget).css('display', 'none');
            $('.stickWiget').css('display', 'none');
            $('.closeButtonWiget').css('display', 'none');
        })
    })
</script>

    

Пример установки

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<img src="https://sx24.ru/CalcShoes/assets/widget/ButtonOpenWidget.png" class="buttonShowWiget" >
<div class="bgWiget" style="display: none"></div>
<div class="closeButtonWiget" style="display: none">&#215;</div>
<iframe src="https://sx24.ru/CalcShoes/assets/widget/ForIFrame.html?VendorCode=Master_8_CTAS&Sex=#" frameborder="0" class="stickWiget" style="display: none"></iframe>
<style>
    .buttonShowWiget{
        cursor: pointer;
    }
    .bgWiget{
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black ;
        opacity: 0.5;
        z-index: 999;
        position: fixed;
    }
    .stickWiget {
        position: absolute;
        width: 800px;
        min-height: 1200px;
        left: 50%;
        margin-left: -400px;
        z-index: 9999;
        top: 5%;
    }
    .closeButtonWiget{
        position: absolute;
        z-index: 99999;
        top: 10%;
        color: black;
        cursor: pointer;
        left: 50%;
        margin-left: 350px;
        font-size: 30px;
    }
@media screen and (max-width: 800px) {
    .stickWiget {
        position: absolute;
        width: 400px;
        min-height: 1300px;
        left: 50%;
        margin-left: -200px;
        z-index: 9999;
        top: 5%;
    }
    .closeButtonWiget{
        position: absolute;
        z-index: 99999;
        top: 10%;
        color: black;
        cursor: pointer;
        left: 50%;
        margin-left: 150px;
        font-size: 30px;
    }
}
</style>
<script>
    $(function () {
        $(document).on('click', '.buttonShowWiget', function () {
            $('. bgWiget).css('display', 'block');
            $('.stickWiget').css('display', 'block');
            $('.closeButtonWiget').css('display', 'block');
        })
        $(document).on('click', '.closeButtonWiget', function () {
            $('. bgWiget).css('display', 'none');
            $('.stickWiget').css('display', 'none');
            $('.closeButtonWiget').css('display', 'none');
        })
    })
</script>