0
  • Корзина 0 товаров в корзине

Интеграция 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>




Заказ услуги
Заказать звонок
Купить в 1 клик
Оставьте данные и наш оператор
свяжется с Вами