个人中心
gpt4 book ai didi

javascript - 在 Canvas 中定位模态对话框

转载 作者：太空宇宙 更新时间：2023-11-04 01:13:23 25 4
gpt4 key购买 nike

我正在尝试在 Canvas 上放置一个带有登录详细信息的模态对话框。我正在尝试以响应方式执行此操作。

对于粒子效果，我使用这个 <a href="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js" rel="noreferrer noopener nofollow">https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js</a>

我对 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? <- 尝试在这里实现这个，但经过几个小时的摆弄仍然没有得到想要的结果

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/

最佳答案

我已经修改了你的代码。

已更改 <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%);
}

它在手中只是水平和垂直居中你的模态。

 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>

希望对你有所帮助。

阅读 Material :Grid System - Bootstrap

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

关于javascript - 在 Canvas 中定位模态对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50744296/

25 4 0
文章推荐： Python Mechanize 表单提交不起作用
文章推荐： c - 用我的类型替换结构出现
文章推荐： python - ValueError : Could not find function url in draco. apps.home.models
文章推荐： javascript - 通过 JSON 在 Node 服务器和 Web 客户端上使用对象方法？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com