Bootstrap modal not functioning whatsoever

Question

I'm having a frustrating issue. My modal won't open. I get a 'localhost:8888/book/#rollrModal' white box on the bottom left of my browser, but that's all. And no console warnings and such. Here is a JSFiddle with relevant code: https://jsfiddle.net/m78ws866/ Here is the code for the link I want to open the modal with:

<a href="#rollrModal" data-toggle="modal" data-target="#rollrModal">
    <div class="col-xs-6 col-sm-6 col-md-3">
      <div class="square" style="background: url('book/RollrText.png'); background-size: 100% 100%;"></div>
      <p>Rollr</p>
    </div>
  </a>

Here is the code for the modal:

<div class="modal fade" id="rollrModal" tabindex="-1" role="dialog" aria-labelledby="rollrModalLabel" aria-hidden="true" style="z-index: 900; position: fixed;">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    </div>
</div>

It's empty now because I copy-pasted it from bootstrap's website, which is why this is so frustrating to me.

More details, which might serve to be critical: My site is set up with a bunch of php links in the main index.php, for organizational purposes (i'm not sure if this is a traditional organizational method).

The first bit of code is in a php file called 'chapter2.php', and is linked in the body tag. The second bit is in a file called 'rollr.php', and is linked above the body tag. It was originally inside of the body tag, but that wasn't working, and I read somewhere to try putting it outside the body.

Also, the entire body is rotated -.3deg for an effect, but it hasn't caused any prior issues. There is also an overlaid opaque grunge-effect div (fixed, 100% width & height, not clickable so the text and links can be clicked and highlighted) right after the body opens. This is why I tried using 'z-index: 900' with the modal to fix the issue. The body's z-index is at 400, and the grunge overlay index is at 500.

Here are my Bootstrap & JQuery links, if that's important.

<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

I've worked with modals before, on my last website. I used the exact same syntax and they worked seamlessly. http://www.curtisbell.me

Typically right after resorting to posting on an online forum I find the resolution to my issue, but this problem is simply put, stagnating.

Any help would be greatly appreciated! <3

I would suggest either making a snippet on here using the tools that stackoverflow provides, or make a jsfiddle or something. — adprocas, Apr 11 '18 at 19:24

score 2 · Accepted Answer · answered Apr 11 '18 at 19:29

2

You need to use the bootstrap JS:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

It's also not correct to put block elements in an inline element (div inside an a). I would suggest removing those, but I will not do that in this answer.

Here's a working snippet:

<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

<!-- BOOTSTRAP JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#rollrModal" data-toggle="modal" data-target="#rollrModal">
  <div class="col-xs-6 col-sm-6 col-md-3">
    <div class="square" style="background: url('book/RollrText.png'); background-size: 100% 100%;"></div>
    
    <p>Rollr</p>
  </div>
</a>

<div class="modal fade" id="rollrModal" tabindex="-1" role="dialog" aria-labelledby="rollrModalLabel" aria-hidden="true" style="z-index: 900; position: fixed;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
  </div>
</div>

answered Apr 11 '18 at 19:29

adprocas

1,863
1
14
31

1

<3 Wow, honestly I'm surprised I didn't see that. Worked perfectly. I think I missed that when copying from my old website because all of my scripts were linked at the bottom. – curt.jpeg Apr 11 '18 at 19:40
1

I didn't know the div inside of a rule. How would I go about that correctly? – curt.jpeg Apr 11 '18 at 19:43
@curt.jpeg, I do that daily, haha. I'm not sure exactly what you're trying to achieve with the code in the `a` tag. I'm assuming you could do most of what you want with `` instead of `
`. Validators will yell at you about block elements inside inline elements. Here's a bunch more information and links to other questions and stuff - https://stackoverflow.com/questions/6439649/can-inline-elements-contain-block-elements
– adprocas Apr 11 '18 at 19:47
Okay, so now I get a backdrop but for SOME REASON the actual CONTENT is pushed up above all of the rest of the page.... above everything else. I could use margin-top 100% as a workaround but that only works in inspect for some reason, not when I add it to my div in the php file. This is just annihilating my brain. Please help. I'm actually about to toss my laptop out my window and I can't focus on any other work. – curt.jpeg Apr 11 '18 at 20:43
@curt.jpeg, sorry, I wasn't near a computer. CSS is quite annoying sometimes. To be honest, if you write up something that works, even with "bad" code, get it working and then go have the code reviewed at codereview.stackexchange.com – adprocas Apr 12 '18 at 12:24

Bootstrap modal not functioning whatsoever

1 Answers1