Develop Reference

blank screen on close of modal appears sometimes

I have a dynamically created table with buttons in each row...If I click on the button a modal opens to enter the details with dark screen behind modal..On Click of accept button the modal closes and the dark screen must disappear..It disappears sometimes and not in other situations.
This is how my screen appears sometimes after click of accept button in modal
Screen that appears
: https://i.stack.imgur.com/wWnS8.jpg
<td>
<!-- for accepting -->
<button type="button" class="btn btn-default btn-sm tick" data-toggle="modal" data-target="#{{pl.id}}_1" ><i class="fa fa-check" aria-hidden="true" style="color:green" onclick="remainingChar()"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
<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">Do You want to accept <b>{{pl.employee.emp_name|title }} </b> leave?</h4>
</div>
<form action={% url 'm_manage:accept' %} method="POST">
{% csrf_token %}
<div class="modal-body">
<p><input type="checkbox" name="email" id="email" class="email" > Notify Via Email<br></p>
<p><label for="message">Message</label>
<textarea rows="3" name="message" id="message" class="form-control input-md message" ></textarea></p>
<div id="textarea_feedback_{{pl.id}}" class="textarea_feedback"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success accept" data-dismiss="modal" onclick="checkLength(this)" >Accept</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</td>
In my Jquery:
$(document).on('click','.accept', function(e){
$(".modal-fade").modal("hide");
)}

Usually, when a modal is shown a backdrop or wrapper (dark screen) is also shown behind it.
Try removing that backdrop in your function like this:
$(document).on('click','.accept', function(e){
$(".modal-fade").modal("hide");
$(".modal-backdrop").remove();
)}

You are applying code with wrong class selector,
<div class="modal fade" id= "{{pl.id}}_1" role="dialog" data-id="{{pl.id}}">
Check in above line, modal fade are two different classes. And you are using it as one in your jquery code. like this:
$(".modal-fade").modal("hide");
So try with changing it with proper class name. Here you go:
$(".modal").modal("hide");

I Have tried the above solution but after closing the popup using above method you will not be able to get popup again. When you again click on the button to show popup it will show you a black screen
Below solution works for me precisely.
$("#myModal .close").click();
$("#myModal .close").trigger("click");

Bootstrap Modal is getting hidden when window is resized

I am working on a web page where i am using bootstrap drop down and modal popup.
I am placing the modal popup inside drop down div. The popup is opening and working perfectly.
What issue i am getting is whenever i resize the window, modal popup is getting hidden when window comes to its minimum width.
I want the popup to stay on page.
Below is the code:
<div class="btn-group dropdown">
<button type="button"
id="btnCalculate"
data-toggle="dropdown"
class="dropdown-toggle">
Calculate
</button>
<div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
<div class="col-md-12">
<row>
<label class="control-label">Test</label>
<button name="getBalance"
type="submit"
data-toggle="modal"
data-target="#myModal"
class="btn btn-default"
>
Balance
</button>
</row>
</div>
<!-- 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks

Attach the modal to <div class="container"> tag directly, not to the dropdown menu.
Just like the following:
<div class="container">
<div class="btn-group dropdown">
<button type="button"
id="btnCalculate"
data-toggle="dropdown"
class="dropdown-toggle"> Calculate </button>
<div class="dropdown-menu" style="width:auto; min-width: 400px;" role="menu">
<div class="col-md-12">
<row>
<label class="control-label">Test</label>
<button name="getBalance"
type="submit"
data-toggle="modal"
data-target="#myModal"
class="btn btn-default">
Balance
</button>
</row>
</div>
</div>
</div>
<!-- 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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It is not prefarble to place modals within low-level position such a dropdown menu. See how modals work
Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element.
However, if you insist to keep your modal within the dropdown menu, you need to prevent the dropdown menu from being closed when the modal is called, and ensure it is placed on the top of .modal-backdrop
JS code:
$('.dropdown').on('hide.bs.dropdown', function () {
return false;
});
and add z-index:auto to dropdown-menu style

Show a modal form onchange of a dropdownlist

So I have a ASP .NET MVC application in which users should be able to add content to a page. This content can be things like a location, photos, ...
I have a dropdownlist in my View with all the different content options. When an option is selected, the page should show a modal form where they can enter details based on the type of content they selected.
My modalform is constructed like this:
<div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<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">Map</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="locationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="address" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Add location</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
It's easy to fire up the modal with a button with the data-toggle and data-target attributes like this:
<p class="text-center">
<button id="addLocation" class="btn btn-default" data-toggle="modal" data-target="#locationModal"></button>
</p>
But how do I achieve this form to be shown when selecting a value from the dropdown list? I have added a JS function to the OnChange of my dropdownlist select but I don't know how to fire up the modal form.
Thanks in advance

You can load the modal using javascript on the change event of the dropdown.
Just check this link :
Bootstrap Modal doesn't show

twitter bootstrap tooltip showed behind modal

I have a tooltip with span inside input-group which is showed in modal popup behind the main modal div..
This is my tooltip inside a form-group
<div class="form-group margin-none innerB">
<label for="form_field_name" class="col-sm-3 control-label">label</label>
<div class="col-md-9">
<div class="input-group">
<input type="text" id="form_field_name" name="form_field_name" class="form-control" value="0" readonly="readonly" />
<span class="input-group-addon" data-toggle="tooltip" data-container="body" data-placement="top" data-original-title="tooltip text"><i class="fa fa-question-circle"></i></span>
</div>
</div>
And this is my modal:
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" 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="modalLabel">Modal Title</h4>
</div>
<div class="modal-body">
<div id="modal_body" class="modal-body padding-none">
<div class="lead separator center relativeWrap">
<p class="innerTB margin-none">
<i class="fa fa-fw fa-spinner fa-spin"></i> loading
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
SOLVED
I fixed the problem changing this:
data-container="body"
for:
data-container=".modal-body"

Modals have higher z-index, check out the z-index of it, and give higher then that of to the tooltip. That might solve it

I use tooltip in a label tag if i change z-index it worked. However, label tag has something and it was gone. Just tooltip is showing. Also, I did not use data-container="body"
UPDATE:
I add css file position: fixed;
now, label and tooltip is showing.
.tooltip {
z-index: 100000000 !important;
position: fixed;
}
I changed z-index value according to my situation.

Bootstrap 3: responsive HTML popup

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>