Ticketa
Registered
Привет ДАМИ и ГОСПОДА! Бъдете здрави и щастливи послучай новата 20-19! ))
Имам следния казус. Използвам boostrap 4, и се опитвам да визуализирам "картинка" , чрез Modal със следния код:
[js]$(window).resize(function() {
$('.element_portfolio').height($('.element_portfolio').width()/1.5);
$('.portfolio-sticky-top').css('height', $( window ).height());
if($(window).width() < 768){
$('.modal-dialog .col-12').removeClass('portfolio-sticky-top');
} else {
$('.modal-dialog .col-12').addClass('portfolio-sticky-top');
}
});
$('.element_portfolio').hover(function () {
$(this).children().fadeIn();
}, function () {
$(this).children().fadeOut();
});
$('.portfolio-fade-in').on('click', function () {
var id = $(this).attr('data-target');
var img = $(this).attr('data-img')
var group = $(this).children('h1')[0].innerText;
var name = $(this).children('h2')[0].innerText;
var description = $(this).attr('data-description');
var link = $(this).attr('data-href');
if(link == ''){
$(id + ' .modal-header').html(name);
$(id + ' .modal-btn').html(group);
$(id + ' .modal-p').html(description);
$(id + ' img').attr('src', img);
$(id).modal();
} else {
window.open(link, '_blank');
}
});
$('.portfolio-sticky-top').css('height', $( window ).height());
$('#group_all').on('click', function(){
$('.element_portfolio').fadeOut();
$('.element_portfolio').fadeIn();
$('.portfolio-menu li').css('color', 'black');
$(this).css('color', '#fe8f00')
});
$('.portfolio-menu li').on('click', function(){
if(this.id != 'group_all'){
$('.element_portfolio').fadeOut();
$('.' + this.id).fadeIn();
$('.portfolio-menu li').css('color', 'black');
$(this).css('color', '#fe8f00')
}
});
$(window).trigger('resize');
[/js]
На ред 29:
[js] $(id).modal();[/js]
FireBUG ми показва , че има грешка TypeError: $(...).modal is not a function и това е причината да не сработва кода.
Някой може ли да предложи вариант, в който да сработи? )
HTML частта:
Имам следния казус. Използвам boostrap 4, и се опитвам да визуализирам "картинка" , чрез Modal със следния код:
[js]$(window).resize(function() {
$('.element_portfolio').height($('.element_portfolio').width()/1.5);
$('.portfolio-sticky-top').css('height', $( window ).height());
if($(window).width() < 768){
$('.modal-dialog .col-12').removeClass('portfolio-sticky-top');
} else {
$('.modal-dialog .col-12').addClass('portfolio-sticky-top');
}
});
$('.element_portfolio').hover(function () {
$(this).children().fadeIn();
}, function () {
$(this).children().fadeOut();
});
$('.portfolio-fade-in').on('click', function () {
var id = $(this).attr('data-target');
var img = $(this).attr('data-img')
var group = $(this).children('h1')[0].innerText;
var name = $(this).children('h2')[0].innerText;
var description = $(this).attr('data-description');
var link = $(this).attr('data-href');
if(link == ''){
$(id + ' .modal-header').html(name);
$(id + ' .modal-btn').html(group);
$(id + ' .modal-p').html(description);
$(id + ' img').attr('src', img);
$(id).modal();
} else {
window.open(link, '_blank');
}
});
$('.portfolio-sticky-top').css('height', $( window ).height());
$('#group_all').on('click', function(){
$('.element_portfolio').fadeOut();
$('.element_portfolio').fadeIn();
$('.portfolio-menu li').css('color', 'black');
$(this).css('color', '#fe8f00')
});
$('.portfolio-menu li').on('click', function(){
if(this.id != 'group_all'){
$('.element_portfolio').fadeOut();
$('.' + this.id).fadeIn();
$('.portfolio-menu li').css('color', 'black');
$(this).css('color', '#fe8f00')
}
});
$(window).trigger('resize');
[/js]
На ред 29:
[js] $(id).modal();[/js]
FireBUG ми показва , че има грешка TypeError: $(...).modal is not a function и това е причината да не сработва кода.
Някой може ли да предложи вариант, в който да сработи? )
HTML частта:
PHP:
<div class="portfolio_vave pt-3 pb-3" id="portfolio">
<div class="row">
<?php foreach($items as $key=>$element): ?>
<div class="ml-2 mr-2 mb-3 col-xs-12 col-lg-5 col-md-5 no-padding element_portfolio group<?= $element->group_id ?>" style="background-image: url('<?= $element->img_min_id->getSource() ?>');">
<div class="portfolio-fade-in" style="background-color:<?= $element->color ?>" data-target="#exampleModal1" data-href="<?= $element->link ?>" data-description="<?= $element->description ?>" data-img="<?= $element->img_max_id->getSource() ?>">
<h1><?= $element->group->group_name ?></h1>
<h2><?= strtoupper($element->name) ?></h2>
<i class="fa fa-angle-right"></i>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog portfolio-dialog" role="document">
<div class="row">
<div class="col-xs-9 text-center hidden-xs portfolio-bg-white">
<img src="" alt="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-xs-12 col-sm-3 portfolio-sticky-top">
<h1 class="modal-header"></h1>
<p class="modal-p"></p>
<div class="modal-btn"></div>
</div>
<div class="col-xs-12 text-center visible-xs portfolio-bg-white">
<img src="" alt="" class="img-responsive" style="width: 100%;">
</div>
</div>
</div>
</div>