Positioning a Modal-Dialog box within a Canvas

Question

I am trying to position a Modal-Dialog box with Login details on a Canvas. I am trying to do this responsively.

For the particle effect I am using this https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js

I am still relatively new to Bootstraps Grid System, so please excuse me for an obvious mistakes.

var particles;

particles = Particles.init({
  selector: ".background",
  color: ["#DA0463", "#404B69", "#DBEDF3"],
  connectParticles: true,
  speed: 5
});

function pause() {
  particles.pauseAnimation();
}

function resume() {
  particles.resumeAnimation();
}

@import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
  margin: 0;
  padding: 0;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #8e2de2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #8e2de2, #4a00e0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#overlay {
  position: absolute;
  top: 20px;
  left: 30px;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css">
  <script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

  <title>Particle Effects Background</title>
</head>

<body>
  <canvas class="background col-span12 text-center"></canvas>

  <div class="container text-center">
    <div class="modal-dialog text-center col-12" id="overlay">
      <div class="col-8 main-section">
        <!-- The content USERNAME PASSWORD-->
        <div class="modal-content text-center">

          <div class="col-12 user text-center">
            <!--This is the users face.-->
            <img src="img/face.png">
          </div>

          <form class="col-12">
            <!--USERNAME-->
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Enter Username">
            </div>

            <!--PASSWORD-->
            <div class="form-group">
              <input type="password" class="form-control" placeholder="Enter Password">
            </div>

            <!--Login Button-->
            <button type="submit" class="btn"><i class="fas fa-sign-in-alt"></i></button>
          </form>

          <!--Forgot Password-->
          <div class="col-12 forgot">
            <a href="#">Forgot Password?</a>
          </div>
        </div>
        <!--END OF MODAL CONTENT-->
      </div>
    </div>
  </div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>
<script src="JS.js"></script>

</html>

Resources I accessed

https://getbootstrap.com/2.3.2/scaffolding.html#layouts

How do you get centered content using Twitter Bootstrap? <- tried to implement this here and still not getting the desired result after some hours of fiddling

Placing a <div> within a <canvas>

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

https://getbootstrap.com/docs/4.0/layout/grid/

https://www.sitepoint.com/understanding-bootstrap-modals/

score 2 · Accepted Answer · answered Jun 07 '18 at 15:18

I have amended your code.

Changed <div class="container ..."> to <div class="container-fluid ..."> as it spans on the entire screen.

Moved <canvas> inside <div class="container ...">.

Added a <div class="row"> outside your modal.

Inside the row div I've added another div which will hold the modal which is <div class="col-sm-12"> since Bootstrap only supports up to 12 grid items.

Added:

.modal-content {
  width: 50% !important;
  margin: auto !important;
  transform: translate(0%, 50%);
}

Which in hand just centers your modal horizontally and vertically.

 var particles;

 particles = Particles.init({
   selector: ".background",
   color: ["#DA0463", "#404B69", "#DBEDF3"],
   connectParticles: true,
   speed: 5
 });

 function pause() {
   particles.pauseAnimation();
 }

 function resume() {
   particles.resumeAnimation();
 }

 pause();

@import url('https://fonts.googleapis.com/css?family=Roboto');
html,
body {
  margin: 0;
  padding: 0;
}

.modal-content {
  width: 50% !important;
  margin: auto !important;
  transform: translate(0%, 50%);
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #8e2de2;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #8e2de2, #4a00e0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#overlay {
  position: absolute;
  top: 20px;
  left: 30px;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css">
  <script src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

  <title>Particle Effects Background</title>
</head>

<body>
  <!--START OF CONTAINER-->
  <div class="container-fluid text-center">

    <canvas class="background col-span12 text-center"></canvas>

    <div class="row">

      <div class="col-sm-12">



        <!-- The content USERNAME PASSWORD-->
        <div class="modal-content text-center">

          <div class="col-12 user text-center">
            <!--This is the users face.-->
            <img src="img/face.png">
          </div>

          <form class="col-12">
            <!--USERNAME-->
            <div class="form-group">
              <input type="email" class="form-control" placeholder="Enter Username">
            </div>

            <!--PASSWORD-->
            <div class="form-group">
              <input type="password" class="form-control" placeholder="Enter Password">
            </div>

            <!--Login Button-->
            <button type="submit" class="btn"><i class="fas fa-sign-in-alt"></i></button>
          </form>

          <!--Forgot Password-->
          <div class="col-12 forgot">
            <a href="#">Forgot Password?</a>

            <!--END OF MODAL CONTENT-->
          </div>
        </div>

      </div>


    </div>

    <!--END OF CONTAINER-->
  </div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js"></script>

Hope I was any help to you.

Reading Material: Grid System - Bootstrap

JSFiddle: https://jsfiddle.net/v1sc27ru/24/

The modal is not 100% centred, you can tweak around with `.modal-content` in your CSS. — Alex, Jun 07 '18 at 15:23
this works thank you, you are a beautiful individual. I will learn alot from this. Thank you. — Adam Schneider, Jun 07 '18 at 17:45
@AdamSchneider `particlesjs` is a wonderful module. I have messed with it before, and you can create a robust amount of weird effects. — Alex, Jun 07 '18 at 19:27

Positioning a Modal-Dialog box within a Canvas

1 Answers1