Расположение модального диалогового окна на холсте - PullRequest
Новая
       17

Расположение модального диалогового окна на холсте

0 голосов
/ 07 июня 2018

Я пытаюсь разместить диалоговое окно Modal-Dialog с данными для входа на холсте.Я пытаюсь сделать это ответственно.

Для эффекта частиц, который я использую <a href="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js</a>

Я все еще относительно новичок в Bootstraps Grid 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? <- пытались реализовать это здесь и все еще не получили желаемый результат после нескольких часов возни </p>

Размещение

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 голосов
/ 07 июня 2018

Я изменил ваш код.

Изменено <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>

Надеюсь, я вам чем-нибудь помог.

Материал для чтения: Сетка - Bootstrap

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...