在“画布”中定位“模态”对话框

时间：2018-06-07 14:52:23

标签： javascript html css twitter-bootstrap canvas

我正在尝试在Canvas上放置一个带有登录详细信息的模态对话框。我正在努力做到这一点。

对于粒子效果我正在使用此 https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js

我对Bootstraps网格系统还是比较新的，所以请原谅我一个明显的错误。 

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>

我访问的资源

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

How do you get centered content using Twitter Bootstrap?＆lt; - 尝试在此处实施此操作，并且在经过几个小时的摆弄后仍未获得所需的结果

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/

1 个答案:

答案 0 :(得分：2)

我修改了你的代码。

将<div class="container ...">更改为<div class="container-fluid ...">，因为它跨越整个屏幕。

在<canvas>内移动了<div class="container ...">。

在你的模态之外添加了<div class="row">。

在row div中，我添加了另一个div，它将保存模态<div class="col-sm-12">，因为Bootstrap最多只支持12 grid items。

添加了：

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

手头只需水平和垂直居中模式。

＆＃13;
＆＃13; 
 var particles;

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

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

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

 pause();
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望我对你有任何帮助。

阅读材料：Grid System - Bootstrap

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

相关问题
最新问题