I am trying to determine if an element is visible in the viewport when the user scrolls. This code works outside of a Modal, but not inside the Modal. I imagine it has something to do with the
z-index, but no matter what I try it does not work. Any ideas?
app.component.ts
app.component.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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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">Modal Header</h4>
</div>
<div class="modal-body">
<h1>Is div shown? {{isTestDivScrolledIntoView ? 'Yes!' : 'No :-('}}</h1>
<div #testDiv class="test">Test</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
app.component.css
p {
font-family: Lato;
}
h1 {
position: fixed;
top: 0;
padding-bottom: 5%;
}
.test {
text-align: center;
height: 40px;
margin-bottom: 40vh;
margin-top: 40vh;
border: 1px solid #000000;
}
Check a feature called Intersection observer. It lets you listen for an element when it comes into view and then fire a callback.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Related
I want to make a modal but unfortunately it doesn't show up
The result I get is my web screen looking like this
It looks like what would be the outside of the modal
The Login above the form of my site changes font whenever I remove this and the modal becomes normal html this is what I noticed from making changes
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Thanks in advance
<style>
#font-face {
font-family: Open-sans;
src: url(OpenSans-Light.ttf);
}
body {
font-family: Open-Sans;
background-image:url('images/ElaionGb.jpg');
background-size:100%;
background-repeat:no-repeat;
}
.contactform {
font-family: Open-Sans;
margin-top:-350px;
width:190px;
}
.contactform input {
color:white;
background-color:transparent;
width:190px;
height:40px;
margin-top:7px;
margin-bottom:7px;
border-radius: 11px;
border: 2px solid blue;
}
.sign {
color:white;
background-color:transparent;
width:70px;
height:40px;
border-radius: 11px;
border: 2px solid blue;
}
.submit-btn input {
color:white;
width:60px;
height:40px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
<h3>Welcome to elaion e-shop.</h3>
</div>
<div class="modal-body">
<p>Sign-in to download the excel order file.<br>
Modify as you please.<br>
Attach and send to us.</p>
</div>
<div class="modal-footer">
<a class="close">Close</a>
</div>
</div>
you need to delete the class hide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hi</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="modal fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
<h3>Welcome to elaion e-shop.</h3>
</div>
<div class="modal-body">
<p>Sign-in to download the excel order file.<br>
Modify as you please.<br>
Attach and send to us.</p>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="close">Close</a>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#myModal').modal({
show: true
})
});
</script>
</body>
</html>
You have to remove the hide class on your modal. Your modal is hidden by default. the hide class will set display: none!important, wich will overwrite bootstraps normal way of setting the modal from display: none; to display: block;
Also, you were missing two wrapper divs:
<div class="modal-dialog">
<div class="modal-content">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
<script>
$(document).ready(function() {
$("#myModal").modal('show');
});
</script>
</head>
<body>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
<h3>Welcome to elaion e-shop.</h3>
</div>
<div class="modal-body">
<p>Sign-in to download the excel order file.<br> Modify as you please.<br> Attach and send to us.</p>
</div>
<div class="modal-footer">
<a class="close">Close</a>
</div>
</div>
</div>
</div>
</body>
The problem is that the class hide is set from the beginning. This is preventing the modal from showing.
Change
<div class="modal hide fade" id="myModal">
to
<div class="modal fade" id="myModal">
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>
<!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 want to slide some content inside modal window when a button is clicked. The effect which I want is a sample slider like effect which can be found here:
I tried to do width toggle but unfortunately it results different from I expect and more important is that the height of the modal changes when content slides. I need to be simply just one content slide out and the other slides in. JQuery UI has an slide effect But I do not want to use that because of technical details. I want to implement a JQuery + CSS solution.
Can anyone help me please? Here is the code I developed.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">
<div class="first-content">
<p>Some text in the modal.</p>
<button type="button" class="btn btn-info first-button">First Button</button>
</div>
<div class="second-content" style="display:none">
<p>Second content</p>
<button type="button" class="btn btn-info">Second Button</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
JS:
$(function () {
$('.first-button').on('click', function () {
$('.first-content').animate({width: "toggle"}, 800);
$('.second-content').delay( 800 ).animate({width: "toggle"});
});
$('.second-content').on('click', function () {
$('.second-content').animate({width: "toggle"});
$('.first-content').delay( 800 ).animate({width: "toggle"}, 800);
});
});
Update to previous answer.
This will give you a slide in left/right module for the modal overlay.
You can tweek the main overlay height setting.
https://jsbin.com/wolijunogu/edit?html,css,js,output
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<button type="button" class="btn btn-info openModal" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">
<div class="first-content">
<p>Some text in the modal.<br>test for different height<br>test for different height</p>
<button type="button" class="btn btn-info first-button">First Button</button>
</div>
<div class="second-content" style="display:none">
<p>Second content</p>
<button type="button" class="btn btn-info second-button">Second Button</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.modal-body div p{
overflow: hidden;
}
.first-content{
width: 100%;
float:left;
}
.second-content{
width: 100%;
float: right;
}
Javascript:
$(function () {
$(".openModal").click(function(){
setTimeout(function(){
var h=$(".modal-body .first-content p").height();
$(".modal-body").css('height',h+80+'px');
$(".modal-body .first-content p").css('height',h+'px');
},250);
});
$('.first-button').on('click', function () {
$('.first-content').animate({width:"toggle"}, function(){
$('.second-content').animate({width:"toggle"});
var h=$(".modal-body .second-content p").height();
$(".modal-body").css('height',h+80+'px');
$(".modal-body .second-content p").css('height',h+'px');
});
});
$('.second-button').on('click', function () {
$('.second-content').animate({width:"toggle"},function(){
$('.first-content').animate({width:"toggle"});
var h=$(".modal-body .first-content p").height();
$(".modal-body").css('height',h+80+'px');
$(".modal-body .first-content p").css('height',h+'px');
});
});
});
I want to show a modal using jQuery, but all window becomes blured like this:
This is the js:
$(document).ready(function () {
$('#addLocation').click(function () {
$('#locationModal').modal('show');
})
$('#addDepartment').click(function () {
$('#departmentModal').modal('show');
})
$('#addRole').click(function () {
$('#roleModal').modal('show');
})
});
And html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pending Requests</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/settings.css"/>
<link rel="stylesheet" type="text/css" href="css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="icon-bar" style="float: left">
<div class="employee"><i class="fa fa-home"></i></div>
<div class="employee"><i class="fa fa-list"></i><!--Summary--></div>
<div class="employee"><i class="fa fa-globe"></i><!--Plan details--></div>
<div class="employee"><i class="fa fa-building-o"></i><!--Company holidays--></div>
<div class="employee"><i class="fa fa-calendar-check-o"></i><!--Team calendar--></div>
<div id="manager"><i class="fa fa-clock-o"></i><!--Pending requests--></div>
<div id="hr"><i class="fa fa-cog"></i><!--Settings button--></div>
<div class="employee"><i class="fa fa-power-off"></i></div>
</div>
<div class="container">
<div class="container-fluid">
<div class="row">
<div>
<button id="addUser">Create user</button>
</div>
<div>
<button id="addLocation" >Create location</button>
</div>
<div>
<button id="addRole">Create role</button>
</div>
<div>
<button id="addDepartment" >Create department</button>
</div>
<div>
<button id="addOfficialHoliday">Add official Holiday</button>
</div>
</div>
<div id="locationModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Location name</h4>
</div>
<div class="modal-body">
<form>
<input id="locationName" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add new location</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="roleModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Role name</h4>
</div>
<div class="modal-body">
<form>
<input id="roleName" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add new role</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="departmentModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Department name</h4>
</div>
<div class="modal-body">
<form>
<input id="departmentName" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add new department</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
<!--Include jQuery-->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.serializeObject.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/settings.js"></script>
</body>
</html>
the css:
body {
background-color: #eeeeee;
}
.container {
margin-left: 6vw;
max-width: 980px;
width: auto;
border-radius: 15px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
How to fix this ? What can be the cause of the problem ? Is a better way to make bootstrap-modal ?
Just add data-backdrop="false" to your modal. so... the code will look like this:
<div id="locationModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
that's it! your modal will show on top. Hopefully will help.
These are the default Bootstrap z-index settings:
#zindex-navbar: 1000;
#zindex-dropdown: 1000;
#zindex-popover: 1060;
#zindex-tooltip: 1070;
#zindex-navbar-fixed: 1030;
#zindex-modal-background: 1040;
#zindex-modal: 1050;
.modal should have the z-index value of 1050, if these default settings haven't been changed. Theoretically, if you delete that line with z-index: 1; it should use the default value defined by Bootstrap before your user css