I'm implementing a Bootstrap HTML application that using Modal as confirm dialog, and it could be a modal inside another one. For example I open modal, then I click something on that modal, the first one will be hidden, and open another modal.
From Bootstrap 3.3.6, they are supporting to add a margin-right automatically, and hide the vertical scroll bar, however once the second modal is opened, the scroll bar is not disappeared, and if I close and open again these modals several times, the margin-right will be increased from 17px to 17x2px, and 17x3px ...
I don't know how to solve that problem with Bootstrap modal, or any workaround, I'm also thinking about Angular that keep only 1 modal, and change the modal content (including header, body, and footer), and each modal will be introduced in a separated HTML template, and angular will load a particular template for each modal, but I'm not have much experience with these workaround with Angular.
Here is the sample page that I created for my problem, the page had long content, with Open Modal button, click to open first modal, then click on Open Second Modal to dismiss the first one and open the second one. If you do that several time, you can see that the margin right is increased, and a white line at the right.
http://plnkr.co/edit/iUuWaSvgDcaKQPTp1Yb2?p=preview
You have written data-dismiss and data-target on one click itself, which is not wrong but internally bootstrap modal has an animate function which takes its own time (appx 500ms). So it would be better if you control it through jqyery.
see below code.
$("#secondModal").click(function(){
$("#firstModal").modal('hide');
setTimeout(function(){
$("#secondModal").modal("show");
},500)
});
The modal method is already integrated within the bootstrap.js which you use.
So it will not show your margin which occurs at runtime.
You can easily handle using stylesheet according bootstrap modal display once into another bootstrap modal.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" id="myBtn">Click here</button>
<div class="modal fade modal-admin" 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">
<button type="button" class="btn btn-primary" id="modelbtn">Click here</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade " id="myModal1" 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" id='close' class="btn btn-default" data-dismiss="modal" ng-click=''>Close</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#close").click(function(){
$('.modal-admin').css('width', '500px');
});
});
$(document).ready(function(){
$("#modelbtn").click(function(){
$('.modal-admin').css('width', '200px');
$("#myModal1").modal();
$('#myModal1').css('margin-left', '200px');
});
});
</script>
</html>
Related
In my Laravel project , I use AdminLTE and I want to use modals in it.
all part of AdminLTE works great. but, I can't use modals. I don't know how to use it. should I add any js code for it?
scripts:
<script src="{{asset('bower_components/jquery/jquery.js')}}"></script>
<script src="{{asset('bower_components/bootstrap/dist/js/bootstrap.js')}}"></script>
<script src="{{asset('bower_components/admin-lte/dist/js/adminlte.js')}}"></script>
<script src="{{asset('bower_components/datatables.net/js/jquery.dataTables.js')}}"></script>
<script src="{{asset('bower_components/datatables.net-bs/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.full.js')}}"></script>
I want to have some thing like this : https://adminlte.io/themes/AdminLTE/pages/UI/modals.html
Its not Related to Laravel As long as it concerns The modals and Design
so now you have To Check your console For any Error And see If there is any error on console for that modal and if not you have to check any kind of js for modal or bootstrap for modal and in the end you can check from this link for cdn usage of modal plugin for bootstrap :
https://cdnjs.com/libraries/bootstrap-modal
and if not finally check the atrribute of modal and bottuns :
<!-- 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 id="myModal" class="modal fade" 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>
this is an example paste this code and check if its working on your project .
I had mistake in css loading and also I didn't add modal's js file :
<script src="{{asset('bower_components/bootstrap/js/modal.js')}}"></script>
I have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" class="modal fade" 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">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!
The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>
I am trying to open a Bootstrap Modal using the anchor tag. This is my HTML:
<ul class="dropdown-menu">
<li><a data-toggle="modal" href="#createModal">create group chat</a>
<!-- Modal -->
<div class="modal fade" id="createModal" 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>
</li>
When I click on the anchor tag for create group chat, the background blacks out but the actual dialog box does not appear. My website has another Bootstrap Modal that load when the page first loads, so I am not sure if this problem is being caused by a naming conflict. This Modal is named createModal and the other one I am using is called myModal
Try moving the modal outside of the li element.
Also, to get the fiddle working, you just need to add the external references to bootstrap.
I am attempting to make a Calculator in JavaScript. I'm almost at the end, so I added a modal through Bootstrap, which contains an instruction list(somewhat like a manual). While the modal works perfectly on my local machine, it works only halfway through in CodePen.
The issue appears to be that a click on the button brings up the modal but it does not go away if you click on the "Close" button or even the "cross" icon on the modal. It looks like the modal is disabled when it opens up, and the only way to get everything working again is to refresh the codepen link.
As I'm making this calculator for an online tutorial exercise, I need to submit it via CodePen only. So I've got to make this work.
Here's the relevant HTML -
<div id="instructions">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">
Launch Instructions
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Instructions</h4>
</div>
<div class="modal-body">
<ul class="list-group">
<li class="list-group-item">Click on the AC button before beginning each new calculation.</li>
<li class="list-group-item">For square root of a number, first press the number then press the square root button.</li>
<li class="list-group-item">An operation that results in a number too large to fit on the screen will display zero instead.</li>
<li class="list-group-item">If a number has too many digits after the decimal point to fit on screen, some of the digits will be truncated.</li>
<li class="list-group-item">Some operations like divide by zero, and square root of negative integers are not permitted.</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
In CodePen, I've added BootStrap through CSS quickadd, and for JS, I added jQuery and then Bootstrap(in that order), so I'm not sure why it doesn't work. I have followed the same order in my local files, where the modal works perfectly-
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="4.js"></script>
Here's the CodePen link for my calculator. Interestingly though, I made another Pen here where I was testing just the modal bit, and it works just fine here.
It is happening because you have made position of instructions fixed.
As you had made #instructions fixed, which is the parent of modal, the modal was relatively above its parent(#instructions), but the parent(#instructions) itself was below the backdrop(<div class="modal-backdrop fade in"></div>) as it's(#instructions) z-index was not set which gets created when you open a modal window.
If I remove position fixed from the div instructions your modal works fine.
Instead of fixing the div to the bottom you can directly apply the CSS on the button.
#instructions button {
position: fixed;
left: 44%;
bottom: 0;
}
Or else you could just move the #instructions above the backdrop div.
#instructions{
z-index: 1049;/*keeping z-index above 1040*/
position: fixed;
left: 44%;
bottom: 0;
}
A small demo of the same issue, where one cannot click on close buttons inside the modal in Chrome whereas the buttons are clickable in FF. Here the modal is placed inside another container whose position is fixed.
Try getting the z-index of modal's parent in FF and Chrome.
In this demo $('.parent').css('z-index');
Chrome z-index is set to 0
FF z-index is set to 'auto'
This explains the above issue.
$(function(){
$('.modal-body > span').html($('.parent').css('z-index'));
});
.parent{
position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="parent">
<!-- Button trigger modal -->
<button type="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">
<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 testing</h4>
</div>
<div class="modal-body">
z-index: <span></span>
</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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
I had this problem too.
Problem is comming from html, created by bootstrap js:
<div class="modal-backdrop fade in"></div>
This line is created directly before end of element. This cause "z-index stacked element problem." I believe that bootstrap .js do creation of this element wrong. If you have in mvc layout page, this script will cause still the same problem. Beter js idea cut be to get target modal id and inject this line to html before...
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
SO SOLUTION IS repair bootstrap.js - part of modal:
.appendTo(this.$body)
//REPLACE TO THIS:
.insertBefore(this.$element)
SOLUTION 2:
add to your page this script:
$('.modal').appendTo("body")
Solution3:
Add to css:
.modal-backdrop{display:none;}
I am using Twitter Bootstrap's (v3.1) modal dialog and when I show a dialog and dismiss it, any buttons that were not on the screen when the modal displayed are no longer clickable in IE 11.
As shown in the above illustration, the I have multiple buttons to show modals and they are further down the page than where the modal displays (at the top of the page). The first modal displays properly. However, once I dismiss that modal and scroll back down the page to click on another button, the buttons are no longer clickable.
My button code:
<button type="button" id="btnPreviewSales" name="btnPreviewSales" class="btn btn-default" data-toggle="modal" data-target="#previewSalesModal"><span id="btnSalesPrevImg" class="glyphicon glyphicon-eye-open"></span> Preview Sales</button>
My modal code:
<div class="modal fade" id="previewSalesModal" tabindex="-1" role="dialog" aria-labelledby="previewSalesModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="previewSalesModalLabel">Preview Sales</h4>
</div>
<div class="modal-body">
<img src="preview.jpg" alt="Sales Preview" class="img-responsive" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It works fine in other browsers (Chrome, Firefox) and I have the X-UA compatible tags properly set. What can I do to get the buttons clickable again after dismissing the modal in IE?
Ok, I found a solution. I also noticed that the modal was jumping to the top of the page each time and went looking for a solution to that problem. I found Bootstrap modal: background jumps to top on toggle and the recommended the solution was to override a bootstrap style:
body.modal-open {
overflow: visible;
}