在画布内放置模态对话框
[英]Positioning a Modal-Dialog box within a Canvas
问题描述
I am trying to position a Modal-Dialog box with Login details on a Canvas. 
我试图在画布上放置带有登录详细信息的模态对话框。 I am trying to do this responsively. 我正在努力做到这一点。
For the particle effect I am using this https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js 对于粒子效果，我正在使用此https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.2/particles.min.js
I am still relatively new to Bootstraps Grid System, so please excuse me for an obvious mistakes. 我对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>
Resources I accessed 我访问的资源
https://getbootstrap.com/2.3.2/scaffolding.html#layouts https://getbootstrap.com/2.3.2/scaffolding.html#layouts
How do you get centered content using Twitter Bootstrap? 您如何使用Twitter Bootstrap获得居中的内容？ <- tried to implement this here and still not getting the desired result after some hours of fiddling <-尝试在此处实施此操作，但经过数小时的摆弄仍未获得预期的结果
Placing a <div> within a <canvas> 将<div>放在<canvas>中
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
https://getbootstrap.com/docs/4.0/layout/grid/ https://getbootstrap.com/docs/4.0/layout/grid/
https://www.sitepoint.com/understanding-bootstrap-modals/ https://www.sitepoint.com/understanding-bootstrap-modals/
1 个解决方案
解决方案1
2 已采纳 2018-06-07 15:18:22
I have amended your code. 我已经修改了您的代码。
Changed <div class="container ..."> to <div class="container-fluid ..."> as it spans on the entire screen. 将<div class="container ...">更改为<div class="container-fluid ...">因为它横跨整个屏幕。
Moved <canvas> inside <div class="container ..."> . 在<div class="container ...">内部移动了<canvas> <div class="container ..."> 。
Added a <div class="row"> outside your modal. 在模态之外添加了<div class="row"> 。
Inside the row div I've added another div which will hold the modal which is <div class="col-sm-12"> since Bootstrap only supports up to 12 grid items . row div内，我添加了另一个div，它将保存模式<div class="col-sm-12">因为Bootstrap仅支持多达12 grid items 。
Added: 添加：
.modal-content {
width: 50% !important;
margin: auto !important;
transform: translate(0%, 50%);
}
Which in hand just centers your modal horizontally and vertically. 手中只是使模态水平和垂直居中。
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>
Hope I was any help to you. 希望我能对您有所帮助。
Reading Material: Grid System - Bootstrap 阅读材料： 网格系统-引导程序
JSFiddle: https://jsfiddle.net/v1sc27ru/24/ JSFiddle： https ://jsfiddle.net/v1sc27ru/24/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.