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">
Related
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
<!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 am new to javascript and willing to learn it on my own interest . I am unable to execute a bootstrap modal after 5 seconds to pop up on the page using setTimeout in javascript. I dont need it in Jquery. Please someone assist me on this **
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Task_1</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 main_div">
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Please click to watch the video again..</p>
<div class="popup_img">
<img src="images/alert.png">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setTimeout(function() {
$('#overlay').modal('show');
}, 12000);
</script>
</body>
</html>
Wrap around the $(function () {}) and change 12000 to 5000.
$(function() {
setTimeout(function() {
$('#overlay').modal('show');
}, 5000);
});
<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>
<div class="container main_div">
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Please click to watch the video again..</p>
<div class="popup_img">
<img src="//placehold.it/200x75?text=alert" />
</div>
</div>
</div>
</div>
</div>
</div>
For some reason my materialize modal has a really strange layout.
I didn't touch my CSS file or changed the basic style at all. Maybe someone knows what's the problem.
My modal is not inside some div's. It's just inside the body
$(document).ready(function() {
$('.modal').modal();
$('#modal1').on('click', function() {});
});
html,
body {
max-height: 100%;
min-height: 100%;
overflow-x: hidden;
}
body {
background-image: url("../img/kristallwelt.jpg");
-webkit-background-size: cover;
moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
Expected Result:
My Result:
EDIT
After i got a solution, I'm struggling with the references. As soon as i click the button, I get this:
Error
In this case I have some false references.
Does someone see a problem here ?
Including at the header
<!DOCTYPE html>
<html>
<head>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- JQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Font aswesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Materialize Logos -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Include CSS -->
<link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
</html>
**Including at the end of the body **
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
Also this console error could be relevant
Error
You have missed a lot of thing in your HTML so I have updated your code.
DEMO
https://jsfiddle.net/98w7ro4u/
HTML
<!-- Modal -->
<div id="modal1" class="modal fade modal-fixed-footer" 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>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
Disgree
</div>
</div>
</div>
</div>
JQuery
$(document).ready(function() {
$('#modal1').modal('show');
});
CSS
You can use yours
I want to be able to toggle an overlay dialog box using a button outside. The problem is that when the overlay dialog opens it blocks mouse access to the button. Can one mimic the Bootstrap modal response without using its data- classes? Is it possible to get around of this modal behavior using CSS, jQuery or javaScript? Here is the code:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.nonmodals {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
}
</style>
</head>
<body onload="HideModals()">
<a type="button" onclick="ToggleReserve()" class="btn btn-primary">Toggle Overlay</a>
<div id="reserveform" class="nonmodals" 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">The Header</h4>
</div>
<div class="modal-body">
<div>
<h3>Hello!</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-offset-2">
<button type="submit" class="btn btn- primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
<script>
function ToggleReserve() {
$("#reserveform").toggle(500);
}
function HideModals() {
$('.nonmodals').css('display', 'none');
}
</script>
</body>
</html>
No sure why you'd want to do that, but the css you can use to do it is
pointer-events: none;
Add it to your "reserve form" div. Any mouse clicks will go through the div to what lies beneath. If you need some clicks not to fall through, you will have to re-set the pointer-events style for those elements.