Интеграция iFrame
1) Подключить jQuery
2) Добавить кнопку с классом buttonShowWiget
<img src="https://sx24.ru/CalcShoes/assets/widget/ButtonOpenWidget.png" class="buttonShowWiget" >
3) Добавить блок фона с классом bgWiget
<div class="bgWiget" style="display: none"></div>
4) Добавить кнопку закрытия c классом closeButtonWiget
<div class="closeButtonWiget" style="display: none">×</div>
5) Добавить фрейм с ссылкой на виджет и классом stickWiget
<iframe src="https://sx24.ru/CalcShoes/assets/widget/ForIFrame.html?VendorCode=Master_8_CTAS&Sex=#" 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">×</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>
свяжется с Вами