Question

I have a simple design with an image inside a centered div. Over the image is a semi-opaque textbox with an h1 element. I want a bootstrap 4 modal component to pop-up after the h1 is clicked. I have followed various tutorials for building the modal, but I can't seem to get it working. I'm not sure what the issue could be.

If someone could take a look and give me some guidance, it would be greatly appreciated.

The CodePen: https://codepen.io/dayna-j/pen/RMZdej?editors=0010

The HTML:

<head>
  <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
</head>
<body>

  <div class='img-div'>
    <img src="https://image.ibb.co/eZcdEn/nature_3084841_1920.jpg" alt='close up of grass'/>
    <div class='textBox-div'>      
      <h1 class = no-select data-toggle="modal" data-target="#Modal">Click Me</h1>
    </div>


      <!-- Modal (inside img-div) -->
    <div id="Modal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
         <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
         </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        </div>
      </div>
    </div>
  </div>
</body>

The CSS:

.no-select {
user-select: none;
}

html {


 box-sizing: border-box;
  background-color: black;
  // overflow:hidden;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* { 
  margin: 0;
  padding: 0; 
}

body{
  background: #232526;
  // background: papayawhip;
  display: flex;
  justify-content: center;
  align-items: center;
  // border: 5px solid green;
  // border-radius: 1000px;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.container-fluid {
  position: relative;
  height: 100%;
  width: 100%;
}

.img-div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  // position: relative;
  max-height: 500px;
  max-width: 850px;
  width: 100%;
  border: 1px solid grey;
  // border-radius: 1000px; 
}

.textBox-div { 
  position: absolute;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  background: whitesmoke;
  opacity: .5;
}

.textBox-div h1 {
  font-family: 'Fredericka the Great', cursive;
  margin: auto 0;
  font-weight: 900;
}

@media screen and (max-width:400px)
{
  h1 {font-size: 1.5em;}
}

@media screen and (max-width:200px)
{
  h1 {font-size: 1em;}
}

The JavaScript:

$( document ).ready(function() {

  $('#Modal').modal('hide');


  $('h1').on('click', function(){
    $('#Modal').modal('show');
  });

});

Answer 1

There are several issues with the code...

You need popper.js which is not included on Codepen.
Having both data-toggle="modal" and the JS code to $('#Modal').modal('show') are counteracting each other which is preventing the modal display.
The use of // in the CSS (html{}) is not a proper comment.

Use data-toggle="modal" or $('#Modal').modal('show'), but not both.

https://www.codeply.com/go/zcHpRWcMA5

An alternate to linking to popper.min.js and bootstrap.min.css is to use bootstrap.bundle.min.js which combines both..

CDN: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js

Answer 2

Link popper.js in your head.

Via CDN:

<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>

(From here)

Also remove your JS script to show and hide the modal. You don't need it since bootstrap already does it for you.

Bootstrap 4 modal is not displaying

2 个答案: