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;"
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>
I'm using bootstrap modal for login and register. I want to open register modal in after closing login modal on same button. Now register modal is opening on click of button on login pop up. After clicking on overlay the both pop going close but overlay is not hiding.
So for hiding first modal I used data-dismiss="modal" for closing first modal but it's not opening another modal. I want to close both modal on clicking on overlay or hide first modal and then show another modal. If it's possible without jQuery then great. Please help
<!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/3.3.1/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="#login">Login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>login</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#register" data-dismiss="modal">register</button>
</div>
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>register</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I can't imagine how the modal show inside modal, but do you think this is what you want?
<!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/3.3.1/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="#login">Login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>login</p>
<button id="register-button" type="button" class="btn btn-info btn-lg" data-dismiss="modal">register</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>register</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("#register-button").click(function(){
$("#register").modal("show")
})
</script>
</body>
</html>
Yes, this possible without jquery. Your html(modal code) is not organized proper way. You can not use a modal within a modal. You have to be separate each modal.
<!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/3.3.1/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="#login">Login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>login</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#register" data-dismiss="modal">register</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>register</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Why do you want to show a modal inside a modal. try this one. when login button clicks it will open login modal then register button->click - open register modal.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
</style>
</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="#login">Login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>login</p>
<button type="button" class="btn btn-info btn-lg" id="btn_register">register</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>register</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#btn_register").click(function(){
$("#login").modal("hide");
$("#register").modal("show");
});
</script>
</body>
</html>
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
As you can see in internet explorer bootstrap popup is not working fine.
Check ie screenshot example, please.
index.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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<iframe src="http://www.tutorialspoint.com/javascript/javascript_tutorial.pdf" width="100%" height="375" type='application/pdf' style="margin-top:150px;"></iframe>
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How to solve this problem? Appreciate any help.
I reccomend a different approach :
Embed the pdf using Google PDF viewer which uses javascript like so :
<!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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<iframe src="http://docs.google.com/gview?url=http://www.tutorialspoint.com/javascript/javascript_tutorial.pdf&embedded=true" width="100%" height="375" type='application/pdf' style="margin-top:150px;">
</iframe>
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Tested successfuly on explorer and chrome.
just add this script in your code, it works fine with ie too, try this
<!--add this code in your file with script tag -->
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});
<!--add this code in your file with script tag -->
<!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/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<iframe src="http://www.tutorialspoint.com/javascript/javascript_tutorial.pdf" width="100%" height="375" type='application/pdf' style="margin-top:150px;"></iframe>
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am not sure where I can edit the bootstrap modal pop-up on my portfolio? It is the chili picture in the bottom on this site. At the moment it shows in 1000*600px, but I would like it bigger.
Link to my portfolio
HTML
<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<div class="block-image">
<div class="overlay"></div>
<img
class="coursepic"
src="/images/thumbs/image1.jpg"
data-toggle="modal"
data-target="#myModal1"
alt="Trolltunga, Norway"
>
</div>
<div class="block-data">
<h3>
Test
</h3>
</div>
</article>
</div>
CSS
img.coursepic {
width: 100%;
height: 100%;
}
img.coursepic:hover{
cursor: pointer;
opacity: 0.5;
background: rgba(0,0,0,0.5);
border-radius: 2px;
width: 100%;
height: 100%;
}
JS
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
Its working fine with modal-lg
add this snippet in your centerModal()
$dialog.addClass("modal-lg");
for data-target="#myModal1", the #myModel1 should get modal-lg class
and add class="coursepic modal-lg"
or use this
<!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>Large Modal</h2>
<!-- Trigger the modal with a button -->
<img class="coursepic" data-toggle="modal" data-target="#myModal" src="http://placehold.it/350x150" />
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="coursepic" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap does have some built in styles to create modals of different sizes:
The important class here is modal-lg
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>This is a large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>