在画布中定位模式对话框

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

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

我对引导网格系统还比较陌生，所以请原谅我一个明显的错误。

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引导程序获得居中的内容？ <-尝试在这里实现这一点，但经过几个小时的摆弄仍然没有得到预期的结果

在<画布中放置>

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 ...">，因为它跨越整个屏幕。

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

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

在rowdiv 中，我添加了另一个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>

希望我对你有什么帮助。

阅读材料：网格系统 - 自举

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

相关内容

最新更新

热门标签：