I am trying to use a Bootstrap html page with body zoomed in at 90%.. The Bootstrap modal is showing spaces from right and bottom..
To show the issue i am putting a basic html page with modal at body 90% zoom..
When you click on the open modal you will see spaces from right and bottom for modal..How do we render modal with not extra spaces with body zoom 90%..Desired output is modal blur background should cover the whole screen.. and modal body should be in center of x axis as if zoom of 90% and 100% are same except the zoom 90% is small font
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="zoom:90%;">
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
class .modal-backdrop is using 100vh & 100vw and since we applied 90% zoom, 100vh corresponds to 90% of the screen height; 100vw corresponds to 90% of the screen width;
solution: override this class with width: 100%; height: 100%;
.modal-backdrop {
width: 100% !important;
height: 100% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body style="zoom:90%;">
<div class="container">
<h1> with zoom 90%
</h1>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
Related
I have scanned several other posts relating to this, but I cannot work out a working solution sadly.
Any help greatly appreciated.
I am trying to stop the modals flashing visibility briefly while the page is loading. I have a 3D model that loads using OpenwebGL, so need a few seconds to load. The modals flashing at the start looks untidy.
I'm not sure of the best approach to stop the modals from loading until the 3d model has finished loading.
This is the HTML code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
</head>
<body>
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<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="myModal01" role="dialog" >
<div class="modal-dialog" style="display:none">
<!-- 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>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</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="myModal02" 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>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Me again.
Ok appreciate a lot of questions on the forum regarding this topic, but didn't find an easy fit.
I eventually figured out a solution using the following from various ideas combined.
So for anyone else trying to fix this issue in the future try the following:
Put the modal div's in a new div. Make the parent div invisible using a style comment in the header. Add this to the opening body comment onload="showdiv();",
Then add a function showdiv script at the bottom of your body.
Here is the same HTML above with the new adjustments:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
<link rel="manifest" href="media/manifest.json">
<link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#modaloff {
visibility: hidden;
}
</style>
</head>
<body onload="showdiv();">
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<div id="modaloff">
<div class="container" id="modaloff01" >
<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="myModal01" 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>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</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="myModal02" 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 02</h4>
</div>
<div class="modal-body">
<p>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showdiv() {
setTimeout(function () {
document.getElementById("modaloff").style.visibility = "visible";
}, 5000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(document).ready(function() {
$("#myBtn2").click(function() {
$("#myModal2").modal({
backdrop: false
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal</h2>
<button type="button" class="btn btn-info" id="myBtn2">Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I found that {backdrop: false} can make modal's overlay be transparent.
But It prevent closing modal from click outside of the modal.
Question:
How can I make it enabled to close modal through click outside of the modal , At the same time, The modal's overlay remained transparent?
Just add opacity:0 to the backdrop element, and remove backdrop:false
.modal-backdrop {
opacity:0!important;
}
<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(document).ready(function() {
$("#myBtn2").click(function() {
$("#myModal2").modal();
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal</h2>
<button type="button" class="btn btn-info" id="myBtn2">Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the following style
.modal-backdrop.in {
filter: alpha(opacity=0); // For IE
opacity: 0; // For all other browsers
}
Also there is no need of backdrop: false now.
But one thing that i want to mention is that although you will be able to see whats in the background, it wont be clickable or accessible until the modal closes.
I have a bootstrap modal button inside a div. I want it so that when I click on the button the modal opens but it ignores any programming for the outside div. I can get this to work using event.stopPropagation(); but the modal won't open. Can anybody see how to fix this?
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<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 id="testdiv" style="width:400px; height:400px; background-color:Beige;padding:40px;">
<button id="openmodal" 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-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>
<script>
$(document).ready(function(){
$("#testdiv").click(function(){
alert("Only show when the outside area is clicked")
});
});
$(document).ready(function(){
$("#openmodal").click(function(){
event.stopPropagation();
alert("Open the modal and only show this alert")
});
});
Open the modal on button click and remove the modal reference from the button that is remove data-toggle="modal" data-target="#myModal".Use .modal('show') to open the modal on button click
$(document).ready(function() {
$("#testdiv").click(function() {
alert("Only show when the outside area is clicked")
});
$("#openmodal").click(function() {
event.stopPropagation();
$('#myModal').modal('show');
alert("Open the modal and only show this alert")
});
});
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<div id="testdiv" style="width:400px; height:400px; background-color:Beige;padding:40px;">
<button id="openmodal" type="button" class="btn btn-info btn-lg">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-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>
I want to divide the screen as left menu and main menu with Bootstrap.
Left Menu will be "col-md-2" and Main Menu will be "col-md-10" and I'd like to make main menu as a overlay screen.
For this reason, I am using bootstrap modal. As you can see in my below code:
1-) I cannot use "col-md-xx" class into Modal class
2-) If I set the 80% width to class="modal-dialog", it is nearly working but left position is being wrong
3-) Therefore, I am setting the modal position with jQuery but it is still now working properly.
I know that it is very diffucult to explain but if you check the below code I suppose you will understand the situation.
Do you have any suggestion to fix this issue?
Thanks in advance.
<html lang="en">
<head>
<title>-</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
#leftmenu,
#mainmenu {
border-style: solid;
}
</style>
<script>
var aa = 1;
$(document).ready(function () {
$("#myModal").modal({
backdrop: 'static'
});
$("#myModal2").width($("#mainmenu").width());
$("#myModal2").offset({
left: $("#mainmenu").position().left // (if I add to "-150" end of this line it will be ok but I cannot set hardcoded number)
})
});
</script>
</head>
<body>
<div class="row">
<div id="leftmenu" class="col-md-2">Left Menu</div>
<div id="mainmenu" class="col-md-10">
Main
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div id="myModal2" class="modal-dialog" style="width:80%;">
<!-- 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>
<button type="button" class="btn btn-info btn-lg" id="myBtn2">Open Modal2</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
CSS:
.left-zero {
margin-left: 0 !important;
}
Change into HTML:
<div id="myModal2" class="modal-dialog left-zero">
$(window).load(function(){
$('.alertbox').click(function(){
alert('You Clicked on Click Here Button');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<div>
<a class="alertbox" href="#clicked"> Click Here</a>
</div>
I want the alert to be displayed in the bootstrap Modal.
Create the error div in modal body. and set error
$(document).ready(function(){
$('#alertbox').click(function(){
$("#error").html("You Clicked on Click here Button");
$('#myModal').modal("show");
});
});
<!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.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" id="alertbox">Click here</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 id="error"></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>
Probably I didn't understood your question correctly, but you can't use the alert function to display a message insidea a page element. Alert displays a system alert outside the page dom.
If you want to display a message inside a modal you have to include (or inject) the modal markup in your page html, then you simply show/hide the modal via bootstrap functions.
You have a very good example here