Warum ist meine modal nicht zeigen? Bootstrap 4

    <head>
    <meta charset="utf-8" />
    {% load staticfiles %}
    <link rel='stylesheet' href="{% static 'homepage/css/bootstrap.min.css' %}">
    <link rel='stylesheet' href="{% static 'homepage/css/element.css' %}">
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">

    <style type="text/css">
        html,
        body {
            height:100%;
            font-family: 'Comfortaa', cursive;
            padding-top: 100px;
        }
        header {
            font-family: 'Comfortaa', cursive;
        }
    </style>
</head>

<header>
    <nav class="navbar navbar-expand-lg navbar-inverse fixed-top" id="mainNav">
        <div class="container-fluid">
            <a class="navbar-brand logo" href="{% url 'index' %}"><img class="logo img" src="{% static 'homepage/img/leaves.png' %}">NAME</a>
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                      <a class="nav-link" href="{% url 'product_page' %}">ProductName`</a>
                    </li>
                    <li>
                        <p class="navbar-btn">
                            <a data-toggle="modal" href="#" data-target="#newsletterModal" class="btn btn-default">Newsletter</a>
                        </p>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="{% url 'store' %}">Store</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link js-scroll-trigger" href="{% url 'login' %}">Log In</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="modal fade" id="newsletterModal" tabindex="-1" role="dialog" aria-labelledby="newsletterModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"> &times;</button>
                    <h4>Sign Up For Our Newsletter!</h4>
                </div>
            </div>
        </div>
    <div>
</header>

{% block content %}
{% endblock %}

Ich versuche zu starten modal, wenn der newsletter-button geklickt wird in der navbar, aber das modal ist, nicht zeigen. Ich folgte einigen anderen stack-überlauf Beiträge und versucht, den modal-div außerhalb der navbar unter anderen tricks, aber nichts scheint zu funktionieren. Irgendwelche Vorschläge?

Andere Vorschläge mit meinem code würde auch geschätzt werden. Danke!

  • Könnten Sie diese als ausführbar snippet und entfernen/ersetzen der {% ... %} Elemente? Siehe: stackoverflow.com/help/mcve.
  • Was ist die aria-hidden=true-Attribut von Ihrem modal? Könnte es sein, halten Sie es versteckt?
  • Die aria-hidden Attribut ist nur für screen-Reader.
InformationsquelleAutor jskrtsth | 2018-01-29
  1. 5

    Gerade getestet Ihre modalen und es funktioniert Prima. Der einzig mögliche Grund ist, dass Sie entweder nicht laden eine der folgenden Dateien ODER laden Sie eine veraltete version von einigen von Ihnen.

    Also, stellen Sie sicher, laden Sie die folgenden Dateien (in dieser Reihenfolge):

    HTML:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    Und auch stellen Sie sicher, dass Sie geladen werden (im head-Bereich) ein up-to-date-version von der css, die ist diese:

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    • Dieser arbeitete für mich - ich brauchte nur die bootstrap js und jquery-tags. danke!
    InformationsquelleAutor WebDevBooster
Schreibe einen Kommentar