I have a large bootstrap modal that I am using from the documentation website:
http://getbootstrap.com/javascript/#modals-sizes
After adjusting it to my needs, this is what I have:
<div class="modal fade bs-example-modal-lg" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Edit Package</h4>
</div>
<div class="modal-body">
<div>
<label class="control-label">Package Name: </label>
<input type="text" class="form-control" id="package-name" placeholder="Name">
</div>
<!-- Other fields here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="savePackageChangesBtn" >Save changes</button>
</div>
</div>
</div>
</div>
Now the problem is that I want the Modal's height to be bigger than it is now because when the user starts typing content, the modal "grows" and that is quite ugly. Instead, I prefer to have a big modal, with a fixed size and use scrolling if needed inside the modal.
To achieve this I added <div class="modal-dialog modal-lg" style="height:80%;">, but it did nothing.
If however, I use <div class="modal-dialog modal-lg" style="height:600px;"> I end up with a retarded modal:
So now I am out of options and out of ideas. How can I achieve the following objectives?
Have a Modal that has X% of the screen's height (like 80%)
Have a Modal with that fixed size, and make the content scrollabe if necessary
CSS
#editPackageModal .modal-body{
max-height: 50vh;
overflow-y: auto;
}
Chanhe max-height to your needs
Try giving max-height and make the dive scroll y
max-height:80%;
overflow-y:scroll;
I hope it works.
Related
So my goal is to have a modal that acts as a timer that will follow as the user scrolls a second modal that acts as a test.
** <div class="modal-window" id="testTimer" role='dialog' data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" id = 'timerCountdown'>
<h4 class="modal-title text-center">Time Remaining</h4><br>
<h4 class="modal-title text-center">90:00</h4>
</div>
<div class='modal-footer text-right'>
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal-window" id="quizModal" tabindex="-1" role="dialog"data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg" style="position: relative; display: table; overflow-y: auto; overflow-x: auto; width: auto; min-width: 700px; max-width: 1080px">
<div class="modal-content">
<div class="modal-title text-center"><h2 id='quizModalTitle'></h2></div>
<div class="modal-body" id='quizModalContent' max-height='calc(100vh - 210px)' overflow-y ='auto'></div>
<div class='modal-footer text-right'>
<button type="button" id = 'testClose' class="btn btn-white" data-dismiss="modal" onclick="fetchQuizProgress()">Close</button>
</div>
</div>
</div>
</div>**
This is what I have for the two modals and it looks like this
In my JavaScript I used .scrollIntoView() on the first modal but it doesn't seem to affect it at all. The issue is that the second modal isn't scrollable and both are locked in place. Is it feasible to get this working like I want?
I have a timeout to hide the 'testTimer' once it reaches a certain time. Once it closes the 'quizModal' becomes scrollable.
So having two modals function at once is really messy. Instead, I thought to make the title the timer and have only the body of the modal (the test) scrollable.
<div class="modal inmodal fade" id="quizModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="false" data-keyboard="false">
<div class="modal-dialog" style="overflow-y: scroll; width: 1200px;max-height:100%; max-width: 100%; margin-bottom: 25px" >
<div class="modal-content">
<div class="modal-header text-center"><h2 class = "modal-title" id='quizModalTitle'></h2></div>
<div class="modal-body " style = 'height: 400px;overflow-y: auto;' id='quizModalContent'></div>
<div class='modal-footer text-right'>
<button type="button" id = 'testClose' class="btn btn-white" data-dismiss="modal" onclick="fetchQuizProgress()">Close</button>
</div>
</div>
</div>
</div>
Worked like a charm. Thanks to: https://www.codeply.com/go/bp/T0yF2ZNTUd
And Carlos Calla on Stack Overflow.
I'm not having any luck using stellar.js. Below, I've included in HTML the div that I'm trying to have scroll at a separate speed than the rest of my webpage to give it the Parallax effect. After the HTML is also the CSS and the JavaScript and jQuery involved in the stellar.js.
<div data-stellar-background-ratio="0.5" id="faq1">
<div class="container-fluid anchor" id="faq">
<div class="row">
<h1>FAQ</h1>
<h2 class="learn-more">Learn More</h2>
<div class="modal-button">
<!-- Large modal button -->
<button class="btn btn-primary" data-target=".bd-example-modal-lg" data-toggle="modal" type="button">Resume/CV</button> <!-- Large modal -->
<div aria-hidden="true" aria-labelledby="myLargeModalLabel" class="modal fade bd-example-modal-lg" data-keyboard="false" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<embed id="resume" src="pdf/resume.pdf">
</div>
</div>
</div>
</div>
</div>
</div>
Next is the CSS for the code involved.
#faq1 {
background-image: url("../img/question.jpg");
background-attachment: fixed;
color: black;
height: auto;
width: 100%;};
Finally, the JavaScript file that's linked to the page contains all of my other JavaScript involved with the whole page, but includes:
$.stellar();
I've been using the code in jquery.stellar.min.js on the https://github.com/markdalgleish/stellar.js.
I've been reading the directions and using all sorts of configurations to get the code to work but it just isn't working. If somebody could help me with this or let me know if I'm doing it completely wrong, I would appreciate it.
The demo with the image loading when clicked on Modal button is here: http://www.bootply.com/7kS6Ube98u
I need to place the iframe instead of the image, but have no idea what code to change, so it loads the same way (i.e. when clicked on the Open Modal button)
Any help is appreciated.
You can simply change the html to use an iframe (without a src attribute), then change the references in the js to iframe to make it clearer. You can see it here
Below is an example of using vanilla JS with Bootstrap 5:
JS:
var modal = document.getElementById('modalId')
modal.addEventListener('show.bs.modal', function (event) {
var iframe = modal.querySelector('iframe');
iframe.src = iframe.getAttribute('data-src');
})
HTML:
<div class="modal modal-blur fade" id="modalId" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Heading
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<iframe data-src="http://www.stackoverflow.com" class="w-100"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have a twitter bootstrap modal popup
<div class="modal fade" id="Div1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog custom-class">
<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="H2">Log</h4>
</div>
<div class="modal-body">
<asp:GridView id ="GridView1" runat="server" AutoGenerateColumns="false"
CssClass="table table-hover table-striped"
DataKeyNames="FieldID"
Font-Name="Verdana" GridLines="Both"
Font-Size="10pt" CellPadding="4">
<Columns>
Few Columns
</Columns>
</asp:GridView>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And my CSS is
#media screen and (min-width: 768px) {
.custom-class {
width: 70%; /* either % (e.g. 60%) or px (400px) */
}
}
But my CSS changes are not reflecting on the pop-up
The grid columns are coming out of the body, I mean the body is not increasing with the width of the grid.How can I make the width of the body more responsive with
grid
Add "modal-wide" to the main modal div, and adjust the width in the CSS. In this example, I'm using 90%.
Since I'm using jQuery to set the max-height of the content area based on the browser dimensions, the modal will be only as tall as necessary, and will provide a scrollbar if needed.
<a data-toggle="modal" href="#normalModal" class="btn btn-default">Normal</a>
<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a>
<a data-toggle="modal" href="#shortModal" class="btn btn-primary">Wide, Short Content</a>
<div id="normalModal" class="modal fade"></div>
<div id="tallModal" class="modal modal-wide fade"></div>
<div id="shortModal" class="modal modal-wide fade"></div>
jsFiddle
I hope this will work for you.
How can I make a responsive HTML popup with Bootstrap 3?
HTML,
<div class="center-pane">
<div class="pane-left">
Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
</div>
<div class="pane-right">
<form method="post" action="/login/">
<div class="form-group">
<label class=" required-field">E-Mail:</label>
<input type="text" name="username" required id="id_username" class="form-control" maxlength="150">
</div>
<div class="form-group">
<label class=" required-field">Password:</label>
<input type="password" name="password" required class="form-control" id="id_password">
</div>
<button type="submit" class="btn btn-default btn-primary btn-block" value="Login">Login</button><br>
I'm desperated!
</form>
<div class="misc text-center">
Some text
<br>
CSS |
HTML5
</div>
</div>
</div>
CSS,
/* HTML POPUP
-------------------------------------------------- */
.center-pane {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
max-width: 1000px;
height: 320px;
border:1px solid red;
}
.pane-left,
.pane-right{
width:480px;
float:left;
border:1px solid blue;
}
.center-pane is responsive when I resize my browser window. but not .pane-left and
.pane-right - how can I make these two responsive as well?
EDIT:
if I use the model's solution, it seems more issues I need to tackle:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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>
the model dialog is not absolute vertically centre by default - how can I change that? also, how can i change the size of the dialog box then? and I need two columns - one left, one on the right to be responsive. how model can help me to do that. I can't see it in the documentation from bootstrap website. I would try to avoid to do any customization via js though.
also, you need to click on a button to trigger the dialog. I don't want to use the button to get the dialog box, I want to get the popup when the html doc is loaded. is it possible?
The width of the Pane-left and Pane-right must change dynamically when the browser is resized to make it responsive !
But if you provide it with a fixed width like width:value in px. The browser resizing wont have any effect on the div !
I recommend you to use inbuilt classes of BOOTSTRAP POPUP COMPONENTS ..
Learn more about BOOTSTRAP MODAL POPUPS -> HERE
Got my own solution with the columns method - col col-xs-6,
<div class="pane-left col col-xs-6">
Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.
</div>
<div class="pane-right col col-xs-6">
....
</div>