Bootstrap Modal is not executing properly

Question

I am trying to implement bootstrap login Modal functionality in my code, but the output is not showing screen is not showing it. Here is the output to the screen

The red box in the image is where I want my Login Modal to be shown.

I have tried using the inspect element, to check the issue with my code, but it is also not displaying it.

But it is showing this error

popper.min.js:4 Uncaught SyntaxError: Unexpected token 'export'

Header files attached:

<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!-- Scripts -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>
  <script src="https://kit.fontawesome.com/4ccd9cbb4a.js" crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link type="text/css" rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link href="css/styles.css" rel="stylesheet">

    <title>Ristorante Con Fusion</title>
</head>

Login Modal Code:

  <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="content">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Login </h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-row">
                            <div class="form-group col-sm-4">
                                    <label class="sr-only" for="exampleInputEmail3">Email address</label>
                                    <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
                            </div>
                            <div class="form-group col-sm-4">
                                <label class="sr-only" for="exampleInputPassword3">Password</label>
                                <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
                            </div>
                            <div class="col-sm-auto">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox">
                                    <label class="form-check-label"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>        
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

Posible duplicate of https://stackoverflow.com/questions/46459767/popper-js-in-bootstrap-4-gives-syntaxerror-unexpected-token-export — Casper, Oct 01 '19 at 07:58
Possible duplicate of [popper.js in bootstrap 4 gives SyntaxError Unexpected token export](https://stackoverflow.com/questions/46459767/popper-js-in-bootstrap-4-gives-syntaxerror-unexpected-token-export) — maazadeeb, Oct 01 '19 at 08:01
no its not the possible duplicate, I read that post before posting it here — , Oct 01 '19 at 08:03
@SMAmmar14 did you change to `https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js` and the problem still persists? — maazadeeb, Oct 01 '19 at 09:19

score -1 · Answer 1 · answered Oct 01 '19 at 07:58

-1

Use the getbootstap link for popper js instead of cdn link

 <script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js
"></script>

answered Oct 01 '19 at 07:58

Sonia

1,909
1
11
13

Bootstrap Modal is not executing properly

1 Answers1