キャンバス内でのモーダルダイアログボックスの配置

debugcn 投稿 Dev

アダムシュナイダー

ログインの詳細が記載されたモーダルダイアログボックスをキャンバスに配置しようとしています。私はこれをレスポンシブにしようとしています。

パーティクルエフェクトにはこれを使用しています https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js

私はまだBootstrapsGrid Systemに比較的慣れていないので、明らかな間違いで失礼します。

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

Twitter Bootstrapを使用して、どのようにコンテンツを中心に配置しますか？<-ここでこれを実装しようとしましたが、数時間いじった後でも望ましい結果が得られませんでした

<キャンバス>内に<div>を配置する

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">モーダルの外側を追加しました。

rowdiv内に、モーダルを保持する別のdivを追加<div class="col-sm-12">しました12 grid items。これは、Bootstrapが最大でのみサポートするためです。

追加：

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

私があなたの助けになったといいのですが。

読み物：グリッドシステム-ブートストラップ

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]