I tried to link a bootstrap modal box to an image button. The modal box will be displayed when I click the image button. Anyone know how to make the background of the modal box transparent and full screen?
This is my html file
<!DOCTYPE html>
<html>
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.modal-content {
height: 100%;
min-height: 100%;
height: auto;
border-radius: 0;
}
</style>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/ionic.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Add an item</title>
</head>
<body onload="selectCategory()">
<div class="bar bar-header">
Back
<h1 class="title">Add Item</h1>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="padding" style="margin-top:75px;">
<label class="item-input">
<input name="photo1" id="photo1" type="image"
src="images/photo-icon.png"
onclick=""
width="20%"
data-toggle="modal" data-target="#myModal"/>
<input name="photo2" id="photo2" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo3" id="photo3" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo4" id="photo4" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
<input name="photo5" id="photo5" type="image"
src="images/photo-icon.png"
onclick=""
width="20%" />
</label>
<label class="item-input">
<span class="input-label">Item Name</span>
<input type="text" placeholder="" id="itemName">
</label>
<label class="item-input">
<span class="input-label">Category</span>
<select id="select_category" name="select_category">
<option value="0">- Select -</option>
</select>
</label>
<label class="item-input">
<span class="input-label">Price</span>
<input type="number" placeholder="" id="price">
</label>
<label class="item-input">
<button class="button button-block button-positive" id="addProduct">Add item</button>
</label>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/addProduct.js"></script>
</body>
</html>
This is the output after I clicked the image
.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
If you want the outside area of the modal will become white.
Then Use this:
.modal-open .modal{
background: #fff !important;
}
I found the solution. Add this to css part
.fade.in {background-color: transparent;}
Just add the following code:
<style>
.modal-backdrop.in{
opacity: 0 !important;
}
</style>
I would suggest using this..
.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.modal-content {
height: auto;
min-height: 100%;
border-radius: 0;
}
I assume you are looking for a lightbox kind of effect in you modal. If so try here some links that can help you further..
https://bootsnipp.com/snippets/7XVM2
http://ashleydw.github.io/lightbox/
https://codepen.io/webcane/pen/bNEOXZ
Related
I created a sign up page with HTML and Bootstrap 5. I made a Validation for this page with the help of Bootstrap. When the registration is complete, a Modal appears. However, there is a problem. Modal opens even if there is an empty space in the form section, that is, even if there is a Validation error. How can I prevent this?
I wrote a code like this:
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Thanks for help.
I couldn't think of a solution.
Catch the show.bs.modal and test the validity again
Alternatively count if the number of .was-validated equals number of forms on the page
(function() {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
[...forms]
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
document.getElementById('exampleModal').addEventListener('show.bs.modal', function(e) {
const errors = [...forms].some(form => !form.checkValidity());
if (errors) e.preventDefault();
});
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Here is a version with only one form
(function() {
'use strict'
const form = document.querySelector('.needs-validation');
form.addEventListener('submit', (e) => {
const thisForm = e.target;
if (!thisForm.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
thisForm.classList.add('was-validated')
});
document.getElementById('exampleModal').addEventListener('show.bs.modal', (e) => {
if (!form.checkValidity()) e.preventDefault();
});
})()
body {
background-color: rgb(232, 232, 232);
}
.box {
margin: 0 auto;
width: 45%;
height: 600px;
background-color: rgb(204, 204, 204);
border-radius: 30px;
padding-top: 25px;
padding-left: 40px;
padding-right: 40px;
}
.box>.title {
font-size: 38px;
font-weight: normal;
text-align: center;
}
.box>.label {
text-align: center;
}
#media only screen and (max-width: 950px) {
.box {
width: 85%;
}
.box>.title {
font-size: 25px;
font-weight: normal;
text-align: center;
}
.box>.label {
font-size: 16px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 80px;"></div>
<div class="box">
<div class="title">Kayıt Ol</div>
<div class="label">Kayıt olmak için lütfen aşağıya bilgilerinizi giriniz. Bilgileriniz çalınmayacaktır.</div>
<form class="row needs-validation" novalidate>
<div style="height: 15px;"></div>
<label for="nameValidation" class="form-label">Ad:</label>
<input type="text" class="form-control" id="nameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="surnameValidation" class="form-label">Soyad:</label>
<input type="text" class="form-control" id="surnameValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<label for="emailValidation" class="form-label">First name</label>
<input type="text" class="form-control" id="emailValidation" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="row">
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Hello I'm trying to show modal with jinja2 (if - else)
because I can't use javascript.
this is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.98.0">
<title>lidar - signup </title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/sign-in/">
<link href="../../static/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
</style>
<!-- Custom styles for this template -->
<link href="../../static/css/signin.css" rel="stylesheet">
<link href="../../static/css/modals.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="text-center">
{%if ErrorTitle%}
<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header border-bottom-0">
<h5 class="modal-title">{{ErrorTitle}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label=Close></button>
</div>
<div class="modal-body py-0">
<p>{{ErrorMessage}}</p>
</div>
<div class="modal-footer flex-column border-top-0">
<button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
{%endif%}
<main class="form-signin w-100 m-auto">
<form method="POST" action="/register">
<img class="mb-4" src="../../static/image/hashtag.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">register</h1>
<div class="form-floating">
<input type="id" class="form-control" id="id" placeholder="name#example.com" required>
<label for="floatingInput">id</label>
</div>
<div class="form-floating">
<input type="usernick" class="form-control" id="usernick" placeholder="name" required>
<label for="floatingInput">nickname</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Password" required>
<label for="floatingPassword">비password</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="repassword" placeholder="Password" required>
<label for="floatingPassword">repassword</label>
</div>
<button class="w-100 btn btn-lg btn-primary" id="form_submit" type="submit">signup</button>
<p class="mt-5 mb-3 text-muted">© lidar</p>
</form>
</main>
</body>
</html>
this is error img.
modal popup is slides the existing page sideways.
https://i.stack.imgur.com/JR1Xu.png
if trigger modal, yes existing page is go away to sideways.
I used bootstrap example.
css also bootstrap example.
How can I fix it? thanks.
<div class="modal-dialog" role="document" style="margin-top:10%">
You can use in-line style to adjust the margin.
I the example below, use can open a modal, type a message and then send it... It would take 2 seconds to send the message... I would like to show a spinner (which is already working) but also I want to background of the modal to be greyed-out while spinner is showing...
$("#sendBtn").click(function() {
$('.sending-message-spinner').show();
setTimeout(function () {
$("#myModal").modal("hide");
}, 2000);
});
textarea {
width: 100%;
height: 80px;
}
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.sending-message-spinner {
position: fixed;
text-align: center;
z-index: 20;
display: none;
width: 40px;
height: 40px;
border: 8px solid #B0B0B0;
border-radius: 50%;
border-top-color: #000;
animation: loading .75s linear infinite;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="d-flex justify-content-center">
<div class="feedback-position sending-message-spinner">
</div>
</div>
<p>type your message: </p>
<Textarea> </textarea>
<button id='sendBtn' type="button" class="btn btn-primary">Send Message</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can add a class to CSS and have your JS call it when the button is clicked. I added to CSS .myClass and set the opacity in there, then called it in JS with $("#myModal").addClass('myClass'); to add that class to myModal when the button is clicked. See here:
UPDATE: Here I did it with an overlay div inside myModal This will grey out the modal without making it transparent.
$("#sendBtn").click(function() {
$("#overlay").show();
$('.sending-message-spinner').show();
setTimeout(function () {
$("#myModal").modal("hide");
}, 2000);
});
textarea {
width: 100%;
height: 80px;
}
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.sending-message-spinner {
position: fixed;
text-align: center;
z-index: 20;
display: none;
width: 64px;
height: 64px;
border: 8px solid #B0B0B0;
border-radius: 50%;
border-top-color: #000;
animation: loading .75s linear infinite;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 10;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<div class="modal" id="myModal">
<div id="overlay"></div>
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="d-flex justify-content-center">
<div class="feedback-position sending-message-spinner">
</div>
</div>
<p>type your message: </p>
<Textarea> </Textarea>
<button id='sendBtn' type="button" class="btn btn-primary">Send Message</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to make my bootstrap modal content responsive but when I resize browser modal contents like modal header , textboxes and login button going out of div please let me know how to make them responsive.
Here is the code.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4 /jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="vertical-align:central">Login With Facebook</h4>
</div>
<div class="modal-body">
<img class="modal-content" src="http://www.firstbaptistashland.com/wp-content/uploads/2015/09/facebook-logo-png-transparent-background-150x150#2x.png" width="100" height="100" style="margin-left:220px;display:block;width:auto;" />
<br>
Email:<input type="text" /><br>
Password::<input type="text" />
</div>
<div class="modal-footer">
<input type="submit" class="btn-default modal-content" style="background-color: #4CAF50; border: none; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; padding: 10px 24px; margin-right: 200px; cursor: pointer; " value="Login" />
</div>
</div>`
</div>
</div>
</div>
try this way on image tag
style="margin-left:220px;display:block;width:auto;"
style="width: auto; left: 50%; transform: translateX(-50%); display: block;"
I can't see where is the extra pading or the things that add the ugly mini scroll horizontal, there is my code:
I have been checking my code and I can't find it :(
Someone can help?
I'm cooding in just html and css, I know that
body{
background: black;
}
section.home{
margin-top: 0;
background: url(../img/bg-01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.pull-left{
}
.ingresar-bg{
background-color: gray;
}
.ingresar{
margin: 50px 60px;
border: solid 1px white;
color: white;
background-color: rgba(0,0,0,0);
padding: 10px;
display: inline-block;
}
.ingresar:hover, .ingresar:active, .ingresar:visited{
background-color: gray;
color: white;
border: solid 1px white;
}
input.form-control{
margin-bottom: 15px;
}
.logo-modal{
margin-left: auto;
margin-right: auto;
}
.img-svg-logo{
margin: 35px 50px;
color: rgb(255, 255, 255);
width: 200px;
position: fixed;
}
#media (max-width:640px) {
.img-svg-logo{
width: 150px;
}
.ingresar{
font-size: 15px;
}
}
.cover-text {
text-align: center;
color: white;
vertical-align: middle;
font-size: 24px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 110px;
}
.input-lg{
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 100px;
}
input[placeholder].position{
text-align: center;
background-position: left center;
padding-left: 5px;
background-image: url(../img/ubicacion1.svg);
background-repeat: no-repeat;
}
.servicio-button{
background: #2260ad;
font-size: 25px;
border: solid 1px #2260ad;
border-radius: 0px;
width: 300px;
margin-bottom: 100px;
margin-top: 100px;
}
.servicio-button:hover{
background-color: #194984;
border: solid 1px #194984;
}
.modal-content {
position: relative;
background-color: gray;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
section.function{
background-color: black;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.iconos{
color: rgb(34, 96, 172);
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div="container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left">
<a href="index.html">
<img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" />
</a>
</div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" />
</div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead">
Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés
</p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position" placeholder="¿Dónde te encuentras?" class="button-add">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a>
</div>
</div>
<!--
</section>
<section class="function">
<div class="cover-text" id="function">
<h1>¿Cómo funciona?</h1>
<p class="lead">We're that "cool" vegan uncle who doesn't have kids and somehow makes a living repairing antique polaroid cameras, while drinking a $38 bottle of artisanal cold-brew.</p>
</div>
<div class="row iconos block-center" id="iconos">
<div class="col-md-4">
<img src="assets/img/ubicacion-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/servicios-img.png" class="img-responsive color" />
</div>
<div class="col-md-4">
<img src="assets/img/agenda-img.png" class="img-responsive color" />
</div>
</div>
</section>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Try this code. Edited and alligned some code.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
<!-- Latest compiled and minified CSS -->
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/normalize.css" rel="stylesheet">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Garage tu taller a domicilio</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<section class="home">
<div "container">
<div class="nav">
<div class="row">
<div class="col-lg-6 pull-left"> <img src="assets/img/Logo_blanco.svg" class="img-svg-logo img-responsive" alt="Logo garage" /> </div>
<div class="pull-right">
<button class="btn btn-default ingresar" data-toggle="modal" data-target="#ingresar">INGRESAR</button>
</div>
</div>
</div>
<div class="cover-text row">
<div class="col-sm-12">
<p class="lead"> Ofrecemos servicios de mantenimiento básico y estética automotriz a donde estés </p>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<form>
<input type="text" class="form-control input-lg position button-add" placeholder="¿Dónde te encuentras?">
</form>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2"> <a class="btn btn-info servicio-button center-block" href="#">Agendar un servicio</a> </div>
</div>
</div>
</section>
<!-- Modal -->
<form class="modal fade" id="ingresar">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<img src="assets/img/logo-grande-color.svg" class="center-block" /> </div>
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Usuario" class="form-control">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<input type="text" placeholder="Contraseña" class="form-control">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<button type="button" class="btn btn-warning" data-dismiss="modal">Registrate</button>
<button type="button" class="btn btn-info pull-left" data-dismiss="modal">Ingresar</button>
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Additional CSS
.row {
margin-right: auto;
margin-left: auto;
}
Actually it is the problem with bootstrap row class.
Check this code . It works
Working example http://www.bootply.com/coISbk1PgQ
I experienced the same issue but I soon figured that I was applying bootstrap classes in the wrong order.
.container = always leaves a wide padding on both sides of the page.
.container-fluid = leaves a small padding.
.row = comes with a negative margin that is equal to the small padding that .container-fluid adds.
So putting this together
<div class="container-fluid">
<div class="row">This container will stretch from one side of the page to the order</div>
<div style="width: 100%">This container will appear to have spaces between both of its sides and the walls of the page.</div>
</div>