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>
Related
I have a modal that contains just one form field, however once the user enters this value it remains even when the modal is closed. I want it to reset on dismiss so that when the modal is opened again, the form is empty. I have some code for this already, however it's not working as it should. If anyone could help out it would be greatly appreciated.
HTML/Modal:
<!-- Modal -->
<div id="myModalViewAddress" class="modal fade" 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">View Hidden Information</h4>
</div>
<div class="modal-body">
<p>Please enter authorisation code</p>
<form id="auth_form10">
<div class="form-group has-feedback" name="auth_code10" id="auth_code10">
<input class="form-control" id="auth_code_input10" autocomplete="new-password" name="auth_code_input10" type="password" required>
<span class="form-control-feedback glyphicon" id="iconBad10"></span>
</div>
</form>
<hr>
<div id="modal-loader" style="display: none; text-align: center;">
<!-- AJAX loader -->
<img src="img/ajax-loader.gif">
</div>
<div id="dynamic-content-address" class="hidden">
<!-- Dyanamic address -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
jQuery:
$('.myModalViewAddress').on('hidden.bs.modal', function() {
$(this).find('auth_form10')[0].reset();
});
JSFiddle
A few issues here. You were using .myModalViewAddress instead of #myModalViewAddress. Also you need to just clear the value with:
$('#myModalViewAddress').on('hidden.bs.modal', function() {
$('#auth_form10 input').val('');
});
jsFiddle example
try this:
after the onclick action:
$('#auth_code_input10').val() == null;
Your problem is given because of your selectors.
if you want to reset your form elements you shold select your form by his id using # and then call the .reset() method.
also your event registration wasn't being made because you are using class selector . $('.myModalViewAddress') instead of id selector # $('#myModalViewAddress')
https://jsfiddle.net/cLkekytx/1/
I've read the many threads on this topic but none have answered the issue that I'm having. I am trying to create a modal view overlay that spans the page width. However, the modal renders but it isn't responsive. It is darkened out and buttons won't work. This is how I load my assets:
<!-- Bootstrap Core -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<!-- Custom CSS -->
<link rel='stylesheet' href='styles/application.css'>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="scripts/bootstrap.min.js"></script>
And this the code I'm running on modal:
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">
<h3>Modal Body</h3>
</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 class="container-fluid">
<%= yield %>
</div>
</body>
</html>
And this is where I want it called from. And I think because I have an animation effect it might be screwing with the event. Note that this is the first thing within the yield:
<div class="container-fluid">
<div class="row"><div class="col-md-12"><h1>Title</h1></div>
<div class="row">
<div class="col-md-3">
<div class="menu-item-1 card effect_hover">
<a class="modal-link" data-toggle="modal" data-target="#basicModal">
<div class="card_front">
<span class="icon-home3 card_text"></span><br>ABOUT
</div>
<div class="card_back">
<span class="card_text">Learn all about our community!</span>
</div>
</a>
</div>
...
So, that's it. I've read the Documentation by Bootstrap and have copied the code into the page but the same issue remains. I've also tried using a local version of bootstrap assets. Thoughts?
I am trying to create a modal view overlay that spans the page width.
Well in that case, you'll have to edit the below line of CSS in the bootstrap.css (not recommended) or in your custom css file.
Here's the line:
#media (min-width: 768px) {
.modal-dialog {
width: 100%; // by default its 600px.
margin: 30px auto;
}
The Bootstrap carousel is built to be responsive, see the screen shots:
On big screens:
.
On smaller screens:
You must be having some content inside the modal which is not responsive or rather with a fixed width.
if you have a look at the styles for the modal, in bootstrap.css, you'll see that:
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
The width is set to auto except when the screen-width is 768 or greater, in which case the width is set to.
width:600px;
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.
I have a spread-sheet like overview with hundreds of cells in there and each cell is a link that opens a modal with form to adjust the contents of the cell (and some additional data, so inline edit is not preferable).
I'm not very familiar with JS but what the page (html with php db) currently does, is creating hundreds of JS Scripts (for each cell 1) but I don't believe thats the correct way, it most definitely is not improving the performance of the page.
What I need, is that each link call on teh same modal, but with different content to show. But how can I pass on some variables or something?(eg. some GET variables or so).
I now create a unique ID for each cell to call on the modal with the pre-filled content (so there are hundreds of forms in this page), but better would be a single modal that receives information I can use to communicate with the DB and fetch the content the moment the modal is opened.
0,00
<div id="42aa04334a02670b6cf0fbe7b4be3e37" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">xx modal content that is created related to the cell</div>
ps. I used bootstrap 2, including jQuery etc. but I don't think that matters for my question
Much thanks in advance!
Yes, you can use single modal. Just apply class, use data-target=".className" to call modal, use data-* to pass formula.
$(document).ready(function() {
$(".cell").click(function() {
$(".modal .modal-body").html("<input type='text' value='" + $(this).data('formula') + "'/>");
});
});
.cell {
border: 1px solid #ddd;
float: left;
padding: 3px 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="cell" data-formula="x-y/z" role="button" data-toggle="modal" data-target=".modal">1</div>
<div class="cell" data-formula="x-a/z" role="button" data-toggle="modal" data-target=".modal">2</div>
<div class="cell" data-formula="x*b*cz" role="button" data-toggle="modal" data-target=".modal">3</div>
<div class="cell" data-formula="c*d/0.5" role="button" data-toggle="modal" data-target=".modal">4</div>
<div class="modal fade" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Edit cell formula</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>
I work with bootstrap 3.0 modal box for show/add image url into input box after click in dynamic image link and choose image from iframe modal box(image manager).
PHP/HTML :
<div class="filesmap">
<input id="video-12" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-12" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>
<div class="filesmap">
<input id="video-90" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-90" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>
<div class="filesmap">
<input id="video-80" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-80" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>
In modal box(static) :
<div class="modal fade" id="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">Modal title</h4>
</div>
<div class="modal-body" style="padding:0px; margin:0px width: 560px;">
<iframe width="560" height="400" src="/dialog.php?type=0&fldr=&field_id=video&&akey=dsflFWR9u2xQa" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe>
</div>
</div>
</div>
</div>
NOW, for add image url from modal box to input box I add dynamic id for input box(example : id="video-90") and sync with field_id (iframe src).
I need to open modal box for each input box with dynamic iframe/src link like this:
src="/dialog.php?type=0&fldr=&field_id=video-12&&akey=dsflFWR9u2xQa"
src="/dialog.php?type=0&fldr=&field_id=video-90&&akey=dsflFWR9u2xQa"
src="/dialog.php?type=0&fldr=&field_id=video-80&&akey=dsflFWR9u2xQa"
my mean is after click link modal open for same video id (iframe src).
How to can I create this ?
i don't know if i understood your question right
but if you mean that all the modals contain the same content try this solution it worked for me
1- the ids for each modal should be different example
<div class="modal fade" id="myModal-'different-id'">
...
</div>
2- this also should be reflected on the data-target within your that triggers the modal
data-target="#myModal-'different-id'"
3- i also suggest triggering the modal using this jquery function *
$(function () { $("[data-toggle='modal']").modal();});
if the modal is active without triggering use this function instead
$(function () { $("[data-toggle='modal']").modal("hide");});