Develop Reference

thymeleaf fragments - html modal for confirmation dialog

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 want to add a floating div over a page or floating modal, keeping the page active

I am building an ember application. I want to add a floating div over a page or floating modal, keeping the page active.
I have added the above code in the didInsertElement hook of the modal component.
i get an error draggable is not a function. Let me know if i can float a div on the page with or without using modal
<div id="floatModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" {{action 'close'}}>×</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
{{yield}}
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
#$('.modal-dialog').draggable({
handle: '.modal-header'
})

make sure you have included all JavaScript and css references
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Bootstrap Modal not working completely on CodePen

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;}

Bootstrap modal automatically adds a margin-right at second opening modal

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>

Disable fade bootstrap modal

I am trying to disable the fade of a modal in bootstrap, but it will not work what ever I do, I have tried the below code but sitll not luck, I have looked all over google but no information on this I have noticed, except the 2 css things I have tried in the below code.
.dont-fade {
trasition: none;
opacity: 1;
}
I just want to disable the fade of a modal, and just have it like a div ontop of the whole page, without the fade.
Heres my html of my modal
<!-- Information on user popup -->
<div id="banModal" class="modal" role="dialog" style="">
<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">Welcome!</h4>
</div>
<div class="modal-body">
<p>Hello, here is some test</p>
</div>
</div>
</div>
</div></div>