PDA

Zobacz pełną wersję : [Rozwiązane] Modal w wigdetkit



Ambroz
06-04-2019, 18:37
Witam szanowne forum.
Potrzebuje pomocy przy kodzie modalu, który jest umieszczony w nowym sliderze od widgretkit.
Problem jest taki, że po wciśnięciu przycisku w sliderze, w tym samym oknie gdzie jest grafika pojawia się ów modal, a chce by on pojawiał się na całej stronie.

w zmiennej text jest tytuł modala np. cert-html

Kod modala:


<p><a<?php if($link_style) echo ' class="' . $link_style . '"'; ?> href="#modal-<?php echo $text;?>" data-uk-modal<?php echo $link_target; ?>><?php echo $app['translator']->trans($settings['link_text']); ?></a></p>

<div id='modal-<?php echo $text;?>' class="uk-modal">

<div class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical">
<div class="modal-content">
<img src="images/certyfikaty/cert-html.jpg" alt="">
</div>
</div>

</div>
<?php endif; ?>



Foto:
9568
9569
Dzięki za wszelką pomoc.

siristru
06-04-2019, 21:22
Eeee, tak z kawałka kodu i obrazka... nie bardzo. Link gdzie to cudo zobaczę?

Ambroz
06-04-2019, 21:39
Już udało mi się zrobić by było na całej stronie. W złym miejscy miałem kod wklejony, ale oczywiście zrodziło to nowy problem XD.
Teraz mam foreach ($items as $item), który tworzy cały slider, ale nie mogę go zmusić by dodał wszystkie tytuły ($item['title'] do tablicy. Dodaje tylko jeden :(
Kodzik ;)


<ul class="uk-slider<?php if ($settings['fullscreen']) echo ' uk-slider-fullscreen'; ?> <?php echo $grid; ?>">
<?php foreach ($items as $item) :

// Media Type
$width = $item['media.width'];
$height = $item['media.height'];

$media = '';

if ($item->type('media') == 'image' && $settings['media']) {
if ($settings['image_width'] != 'auto' || $settings['image_height'] != 'auto') {
$width = ($settings['image_width'] != 'auto') ? $settings['image_width'] : '';
$height = ($settings['image_height'] != 'auto') ? $settings['image_height'] : '';

$media = 'background-image: url(' . $item->thumbnail('media', $width, $height, array(), true) . ');';
}
elseif ($media = $item->get('media')) {

if ($img = $app['image']->create($media)) {
$media = 'background-image: url(' . $img->getURL() . ');';
}
else {
$media = 'background-image: url(' . $media . ');';
}

}
}

// `min-height` doesn't work in IE11 and IE10 if flex items are centered vertically
// can't set `height` when fullscreen
$min_height = (!$settings['fullscreen']) ? 'height: ' . $settings['min_height'] . 'px;' : '';

if ($settings['overlay_image'] != 'hover') {
$media = 'style="' . $min_height . $media . '"';
}

// Second Image as Overlay
$media2 = '';
if ($settings['overlay_image'] == 'second') {
foreach ($item as $field) {
if ($field != 'media' && $item->type($field) == 'image') {
$media2 = 'style="background-image: url(' . $item->thumbnail($field, $width, $height, array(), true) . ');"';
break;
}
}
}

if ($settings['overlay_image'] == 'hover') {
$media2 = 'style="' . $media . '"';
$media = 'style="' . $min_height . '"';
}

?>

<li>

<div class="uk-panel uk-overlay uk-overlay-hover uk-cover-background" <?php echo $media; ?>>

<?php if ($media2) : ?>
<div class="uk-overlay-panel uk-cover-background <?php if ($settings['image_animation'] != 'none') echo 'uk-overlay-' . $settings['image_animation']; ?>" <?php echo $media2; ?>></div>
<?php endif; ?>

<?php if ($settings['overlay_background'] != 'none') : ?>
<div class="uk-overlay-panel uk-overlay-background <?php echo $background; ?>"></div>
<?php endif; ?>

<div class="uk-overlay-panel <?php echo $overlay_hover; ?> uk-flex uk-flex-center uk-flex-middle uk-text-<?php echo $settings['text_align']; ?>">
<div>

<?php if ($item['title'] && $settings['title']) : ?>
<h3 class="<?php echo $title_size; ?> uk-margin-top-remove">

<?php if ($item['link']) : ?>
<a class="uk-link-reset" href="<?php echo $item->escape('link') ?>"<?php echo $link_target; ?>><?php echo $item['title']; ?></a>
<?php else : ?>
<?php echo $item['title']; ?>
<?php endif; ?>

</h3>
<?php endif; ?>

<?php if ($item['content'] && $settings['content']) : ?>
<div class="<?php echo $content_size; ?> uk-margin"><?php echo $item['content']; ?></div>
<?php endif; ?>

<?php if ($item['link'] && $settings['link'] && empty($modal)) : ?>
<p><a<?php if($link_style) echo ' class="' . $link_style . '"'; ?> href="<?php echo $item->escape('link'); ?>"<?php echo $link_target; ?>><?php echo $app['translator']->trans($settings['link_text']); ?></a></p>
<?php endif; ?>

<?php if ($item['link'] && $settings['link'] && isset($modal)) : ?>
<?php
// $replace = str_replace(' ', '-',$item['title']);
// $text = strtolower($replace);
// $array['modals'] = $item['title'];
?>

<p><a<?php if($link_style) echo ' class="' . $link_style . '"'; ?> href="#modal-<?php echo $text;?>" data-uk-modal<?php echo $link_target; ?>><?php echo $app['translator']->trans($settings['link_text']); ?></a></p>

<?php endif; ?>

</div>
</div>

<?php if ($item['link'] && $settings['overlay_link']) : ?>
<a class="uk-position-cover" href="<?php echo $item->escape('link'); ?>"<?php echo $link_target; ?>></a>
<?php endif; ?>

</div>

</li>

<?php endforeach; ?>
</ul>
</div>

<?php if (in_array($settings['slidenav'], array('top-left', 'top-right', 'bottom-left', 'bottom-right'))) : ?>
<div class="uk-position-<?php echo $settings['slidenav']; ?> uk-margin uk-margin-left uk-margin-right">
<div class="uk-grid uk-grid-small">
<div><a href="#" class="uk-slidenav <?php if ($settings['slidenav_contrast']) echo 'uk-slidenav-contrast'; ?> uk-slidenav-previous" data-uk-slider-item="previous"></a></div>
<div><a href="#" class="uk-slidenav <?php if ($settings['slidenav_contrast']) echo 'uk-slidenav-contrast'; ?> uk-slidenav-next" data-uk-slider-item="next"></a></div>
</div>
</div>
<?php elseif ($settings['slidenav'] == 'default') : ?>
<a href="#" class="uk-slidenav <?php if ($settings['slidenav_contrast']) echo 'uk-slidenav-contrast'; ?> uk-slidenav-previous uk-hidden-touch" data-uk-slider-item="previous"></a>
<a href="#" class="uk-slidenav <?php if ($settings['slidenav_contrast']) echo 'uk-slidenav-contrast'; ?> uk-slidenav-next uk-hidden-touch" data-uk-slider-item="next"></a>
<?php endif ?>

</div>
<pre>
<?php
var_dump($item['title']);
?>
</pre>
<div id='modal-<?php echo $text;?>' class="uk-modal">

<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<img src="images/certyfikaty/cert-html.jpg" alt="">
</div>

</div>

Ambroz
06-04-2019, 23:20
Problem został rozwiązany. Okazało się, ze źle deklaruje tablicę i dlatego on tego nie widział.