I am using Bootstrap Modal to quick popup my news.
Currently, I have the problem when clicking on link; it only shows a box. It's not fullscreen.
My question simple is: have any method to append width and height of the class contain modal to body to show fullscreen.
I think because of it a child of another parent. And it can't show fullscreen.
Have any method to show a class of div is fullscreen not dependency any parent element?
Struct my code like this:
.contentfit {
height: 100%;
position: relative;
}
.right-content {
background-color: #5AA258;
float: left;
width: 70%;
height: 100%;
padding-left: 30px !important;
padding-right: 30px !important;
display: flex;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="section">
<div class="contentfit">
<div class="right-content">
<section id="hoicho">
<div class="title">
<h2>The title</h2>
</div>
<div class="services">
<ul>
<li>Services 1</li>
<li>Services 2</li>
</ul>
</div>
<div class="wrap">
<div class="frameallcontent">
<div class="containter">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<p class="title-p"> Click to link
</p>
<!-- Modal -->
<div class="modal fullscreen-modal fade" id="tintuchoicho" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" 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>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="left-content">
</div>
</div>
</div>
I only show a part of my code.
You can see in real my example look like this.
When I click the link underline, it only shows small popup like this.
Place this script at the bottom of your page, just before closing </body>.
$(window).on('load', function(){
$('.modal.fade').appendTo('body');
})
It will effectively move your modals from wherever they are placed, making them direct children of <body>.
If this doesn't work, it means you're overriding the default CSS of .modal and you will need to produce a minimal, complete and verifiable example of your problem here or using any online snippet tool.
Bootstraps documentation says:
Modal markup placement
Always try to place a modal's HTML code in a
top-level position in your document to avoid other components
affecting the modal's appearance and/or functionality.
Taken from here: http://getbootstrap.com/javascript/#modals
So i would suggest moving it down the document to before the closing </body> tag if possible. that should resolve your problem.
Related
Is there a way to limit the size of bootstrap 5 modal dialog and backdrop?
The example below is occupying 100% of the screen, is it possible to make it cover only the parent main container?
<main class="container-fluid pt-4 px-4" style="height: 400px">
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch demo modal
</button>
<!-- Modal -->
<div
class="modal fade hide"
data-backdrop="false"
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>
</main>
I added the CSS below but not working.
.modal-dialog, .modal-backdrop {
/* supposed to take the height and width of parent container */
height: 100% !important;
width: 100% !important;
}
How it works:
What I want (or expected behavior):
The modal component adds a the backdrop element (outside the .modal's parent) automatically, so if you want the modal to be completely contained inside the parent, start by disabling the backdrop with data-bs-backdrop="false".
By default the .modal has position: fixed so it gets rendered relative to the viewport without regards to its parent element(s). This behavior can be overridden by giving the (main) parent position: relative; and give the .modal child position: absolute;. You can also give the .modal an rgba() background-color to simulate an encapsulated, static backdrop within the parent only (clicking on a static backdrop does not close the modal).
To have the modal centered within the parent add .modal-dialog-centered to the .modal-dialog.
In the snippet below I have given both main and .modal a background to more clearly demonstrate:
main {
position: relative;
background: #EEE;
}
main .modal {
position: absolute;
background: rgba(0, 100, 0, 0.35);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-2">
sidebar
</div>
<div class="col-10">
<div class="row">
<nav class="navbar bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
</div>
<div class="row">
<main class="container-fluid pt-4 px-4" style="height: 400px">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade hide" data-bs-backdrop="false" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<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 flex-grow-1">...</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>
</main>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
I am using Bulma as my CSS framework, and while trying to use their modals, they aren't styled at all, as if I'm missing something.
The overlay is there, and x button seems in place and visible, but the content is greyed out.
I am using this code:
<body>
<div id="modal-id" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
Any other Bulma elements you want
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
All other Bulma elements are working.
Note: I am not asking about JS part and how to actually show the modal on click. I am having pure CSS issues.
But this is currently being shown and there is no problem!
if you want a Design, like a card, change .modal-content div to this:
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
YOUR CONTENT
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
I'm trying to launch a Bootstrap modal without using any buttons or jquery. I would just like show a bootstrap modal when page loads as a information and user should be able to close it using close button or it should close when clicked anywhere on the page. I have tried to use the solution from this SO question
load-without-firing-button-or-using-jquery
However, using the suggested solution prevents the modal from being closed using data-dismiss.
.modal {
display:block;
}
Is there a reason why modal doesn't close in this case ? I have tried applying seperate CSS class but it doesn't make a difference.
.mymodal {
display:block;
}
HTML
<div id="registrationModal" class="modal fade in mymodal">
<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">Title</h4>
</div>
<div class="modal-body">
Text
</div>
</div>
</div>
Is it possible to achieve this without using jquery? or valid explanation why such thing is not possible?
The modal doesn't close because there are multiple functions that do different things when you open and close the modal. So when you open the modal the class .in, display block are added and area-hidden="true" is removed from that element. So when you click close there is reverse function. In your case just adding the display block will not work because you need to remove the class .in and remove the whole area-hidden="true" attribute.
Here is the working code:
<style>
.modal{display:block;}
</style>
<script>
$(function() {
$(".modal").addClass("in");
$(".close").click(function(){
$(".modal").removeClass("in").css("display","none").attr("aria-hidden","true");
});
});
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#my-modal">
Launch demo modal
</button>
<div id="my-modal" class="modal fade in">
<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">Title</h4>
</div>
<div class="modal-body">
Hello World!
</div>
</div>
</div>
</div>
<div class="modal-backdrop fade"></div>
Sorry I know you mentioned no jQuery, but there is no CSS fix that I'm aware of, and the jQuery required for this is minimal.
I'd suggest displaying it like this, maybe If no better answer comes up you may consider it:
$('.modal').modal('show');
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="registrationModal" class="modal fade in mymodal">
<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">Title</h4>
</div>
<div class="modal-body">
Text
</div>
</div>
</div>
I have a bootstrap modal window on my site that I can't seem to get styled consistently.
This is what my first modal looks like (and how I want it styled):
This is the 2nd modal window and styling:
here is the css that styles the title and the close:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
Here is a copy of the relevant html for the modal windows:
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div classs="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<br>
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
The html to call the modals:
Movie
and
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
edit 1: There are no parent divs. I did as suggested and removed the !important elements. I do have a form on the 2nd modal window and an iframe in the first, maybe this has to do with margins being set by those rules...looking into that now. Anyway this is what it looks like right now for the form:
and:
Edit2:
Messing around with my code a bit more, I see that if I remove the modal-header class and put the elements into modal-content that it seems to work. I'll post a final edit if I figure out anything else.
It is a simple syntax error that you may have overlooked.
The .modal-header inside #contactUS is not working because the class attribute is written as classs. Simply remove the extra letter.
You have a <br> tag before the h4 which I assume you added as an attempt to solve the problem. It is not needed so you can remove it.
The correct code would be like this:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Movie
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<!-- was classs -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<!-- <br> -->
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/j1sb9gz3/
I'm trying to build a portfolio Page for my business but having trouble getting the Modal to work.
The javascript just executes: without the modal.
Thanks for your help!
<div class="container">
<div class="row">
<ul class="thumbnails">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4"><img src="images/test.jpg" alt="alt-text"/></li>
</ul>
</div>
</div>
<div id="image1" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
</div>
<div class="modal-body">
<li><img src="images/test.jpg"/></li>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Schließen</button>
</div>
</div>
Thank you for providing an example on jsbin, this makes it much easier for us to help you.
Your problem lies within the first row of this excerpt:
<div id="image1" class="modal hide fade" tabindex="-1"> <!-- here -->
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
Bootstrap's .hide class is defined like this:
.hide {
display: none !important;
}
This means that whatever happens, elements with the class .hide will stay hidden. This is ensured with the !important rule.
To solve your issue, you either remove the .hide class from div#image1 like this:
<div id="image1" class="modal fade" tabindex="-1"> <!-- no hide class -->
<div class="modal-header">
<button type="btn" class="close" data-dismiss="modal"><i class="fa fa-times"></i></button>
<h3>Heading</h3>
Or you supply an onclick listener which removes the .hide class if a click occurs. Though, this should not be necessary, since Bootstrap's modal is not visible by default.