Uncaught ReferenceError: $ is not defined

  • Hallo,

    ich habe versucht folgendes script von fiddle (https://jsfiddle.net/ntLpg6hw/11/) zu verwenden. Habe dazu die bootstrap und jquery scripts eingefügt.

    Habe auch gefunden, dass ich das jquery script zuerst einfügen sollte. Dennnoch kommt der Fehler: Uncaught ReferenceError: $ is not defined


    Anbei das script:



    <link rel="stylesheet" href="jquery-ui.min.js">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap.min.js">


    <style>
    #myModal {
    position: relative;
    }

    .modal-dialog {
    position: fixed;
    width: 100%;
    margin: 0;
    padding: 10px;
    }

    </style>

    <html>
    <button id="btn1">Show Modal</button>
    <br />
    <button onclick="alert('Button Clicked')">Another Button</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
    </div>
    <div class="modal-body">
    Modal Body
    </div>
    <div class="modal-footer">
    <button class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>
    </div>
    </div>
    </html>

    <script>
    $('#btn1').click(function() {
    // reset modal if it isn't visible
    if (!($('.modal.in').length)) {
    $('.modal-dialog').css({
    top: 0,
    left: 0
    });
    }
    $('#myModal').modal({
    backdrop: false,
    show: true
    });

    $('.modal-dialog').draggable({
    handle: ".modal-header"
    });
    });

    </script>



    Vielen Dank

  • Code
    1. <link rel="stylesheet" href="jquery-ui.min.js">
    2. <link rel="stylesheet" href="bootstrap.min.js">

    Das kann ja gar nicht funktionieren! <link> ist nur für css ("stylesheet"), du musst jQuery folgendermaßen einbinden:

    Code
    1. <script src="jquery.min.js"></script>

    Auch sicherstellen, dass jQuery bei dem angegebenen Pfad existiert. Außerdem brauchst du jQuery und nicht jquery-ui!!!!


    Ansonsten mache dich bitte mit den Grundlagen von HTML, css und JavaScript vertraut!