Question

我在我的投资组合网站上遇到了模态问题。他们没有露面。在这种情况下，尝试搜索类似的问题，但没有回答帮助我。我正在使用bootstrap和jquery 3.3.1并且在配置模式上不显示。然而，当我将jquery更改为旧版本时，例如2.2.4模式工作正常，但在我的投资组合库中，图像按类使用脚本排序我写的动画slideUp / slideDown即使在他们正在使用jquery 3.3.1时也停止工作。

这是头部：

<head >

<!-- HTML -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">

<!-- SKRYPTY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/filtr.js"></script>
<script src="js/scroll.js"></script>

<!-- CZCIONKI -->
<link href="https://fonts.googleapis.com/css?family=Nova+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">

投资组合部分：

    <div class="container" id="portfolioSection">
<h1>PORTFOLIO<br>-----</h1>
    <div class="kategorie">
        <p class="kategoria" id="all">All</p>
        <p class="kategoria" id="www">Web Design</p>
        <p class="kategoria" id="logos">Logo</p>
        <p class="kategoria" id="opak">Opakowania</p>
        <p class="kategoria" id="druk">Materiały do druku</p>
        <p class="kategoria" id="3d">3D</p>
    </div>

    <div class="portfolio-container">
        <div class="portfolio-item-container portfolio-item druk">
            <a href="#"><img class="img-responsive" src="img/lordis.jpg"></a>
            <div class="overlay">
                <div class="caption-text">
                    Hello there!
                </div>
            </div>
        </div>

        <div class="portfolio-item-container portfolio-item www">
            <a href="#"><img class="img-responsive"  src="img/strona.jpg"></a>
            <div class="overlay">
                <div class="caption-text">
                    Hello there!
                </div>
            </div>
        </div>

        <div class="portfolio-item-container portfolio-item logos">
            <a href="#"><img class="img-responsive"  src="img/sr.jpg"></a>
            <div class="overlay">
                <div class="caption-text">
                    Hello there!
                </div>
            </div>
        </div> 

        <div class="portfolio-item-container portfolio-item 3d ">
            <a href="#"><img class="img-responsive"  src="img/butelka.jpg"></a>
            <div class="overlay">
                <div class="caption-text">
                    Hello there!
                </div>
            </div>
        </div> 

        <div class="portfolio-item-container portfolio-item opak">
            <a href="#"><img class="img-responsive"  src="img/Opakowania.jpg"></a>
            <div class="overlay">
                <div class="caption-text">
                    Hello there!
                </div>
            </div>
        </div>
    </div>
</div>

图库填充程序的脚本：

$(document).ready(function () {
$('.kategoria').click(function () {
    var kategorie = $(this).attr('id');

    if (kategorie == 'all') {
        $('.portfolio-item').slideUp(390);
        setTimeout(function () {
            $('.portfolio-item').slideDown(390);
        }, 400);
    } else {
        $('.portfolio-item').slideUp(390);
        setTimeout(function () {
            $('.' + kategorie).slideDown(390);
        }, 400);
    }
});

现在我正试图从bootstrap网站添加一个常规的模态示例。也许任何人都有类似的问题，并能够提供帮助。

- 编辑 -

这是模态按钮：

<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>

但我不能过去模态因为它是因为我在代码中显示了一些错误，但我没有看到它。我只是从bootstrap页面复制示例模态 - ＆gt;组件 - ＆gt;模态的。

该编码器只显示：

模态标题×...关闭保存更改

Bootstrap模态不会出现

0 个答案: