We Keep Coding

Why model form is not opening on anchor <a> tag?

I have a icon of plus + sign which is supposed to open a modal form on click
but here modal form is not opening.
<td>
<a data-target="#myModal" data-toggle="modal" href="#myModal">
<span class="glyphicon glyphicon-plus"></span></a>
</p>
</td>
Above code represent + sign and click on it.
Model Form code is below:
<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>
What's wrong with it. I am unable to find it. Any help would be appreciated

The bootstrap.js library needs to be included in order for data-toggle to work.

data-target - Angular

I am displaying a dialog by using HTML directly
<!-- Dialog -->
<div class="modal fade" id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Something went wrong</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5 class="modal-title" id="exampleModalLongTitle">Maximum 10 messages selected</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#exampleModalCenter">RunIt</button>
but I would like to do something previously so I would like to execute data-toggle="modal" data-target="#exampleModalCenter" by javascript using (click)
So basically this would be the steps:
1- (click)="test()"
2- execute data-toggle="modal" data-target="#exampleModalCenter" by javascript in test()
to get the DIV that contains it, I have tried:
test(){
var dialog= <HTMLDivElement>document.getElementById(exampleModalCenter);
}
but I can not find the exampleModalCenter

you should be using attr.data-target
<button data-toggle="collapse"
[attr.data-target]="'#exampleModalCenter">RunIt
</button>

Firstly, you must add click method 'test' to button. Change your modal's class name as 'modal fade'. And after, your ts file must be like this:
#ViewChild('exampleModalCenter') exampleModalCenter;
test() {
this.exampleModalCenter.nativeElement.className = 'modal fade show';
}

Not able to use modal in parent element with position as fixed

Hi am try to use bootstrap modal inside of fixed positioned parent element.
But seems like its not working as expected.
Here is an example,
<div class="fixed">
<div>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal">
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 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>
</div>
</div>
</div>
https://codepen.io/anon/pen/yMPOpo
Note: I would like to keep my HTML structure as it is.

You just have to lower the z-index of backdrop of modal,
Try this simple CSS and you are good to go
.modal-backdrop{
z-index:-1;
}

What is the issue? it's not clickable?
Trying setting the modal to position:relative and give it a z-index.
See here:
https://codepen.io/anon/pen/wJPWdr
.modal-backdrop.in {
position:relative;
z-index:100;
}

Short answer: Remove fixed class
Codepen: https://codepen.io/anon/pen/dvZXVG
Here, a question with the same issue: z-index not working with fixed positioning
or MDN documentation: The stacking context

Bootstrap 3: prevent modal inside modal to trigger (hidden.bs.modal) every time

I have one modal inside another modal and I've managed to make the inner one close without affecting the other. The problem is that when the second modal is closed it triggers the 'hidden.bs.modal' event for its self and for the first modal.
<!-- My Html -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<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">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
Upload image
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
</div>
<!-- My JS-->
$('#btnUploadCancel').click(function () {
$('#uploadImage').modal('toggle');
});
$(document).on('hidden.bs.modal', '#myModal', function () {
alert("hello");
});
$(document).on('hidden.bs.modal', '#uploadImage', function () {
alert("goodbye");
});
Here is a jsFiddle example that I made.
The reason for this question is that I need to trigger an action only when the second modal gets hidden and then something else when the first one gets hidden. Any ideas on how to fix this using the event for each of them???
Note: The second modal has to be inside the other as they are called as a partial view.

I'm guessing that these modal elements are being introduced to the page asynchronously, and that's why you're using a delegated event listener bound to the document rather than binding hidden.bs.modal directly to #myModal and #uploadImage themselves. If this is not the case, and you can get away with binding directly, I'd suggest using this approach to catch the hidden event on #uploadImage itself, and prevent it from bubbling up the DOM tree using something like event.stopPropagation();.
Alternatively, though, you can continue to delegate this handler to the document, and use the target property of the Event object passed into your handler callback to determine which element was the actual source of the event:
$(document).on('hidden.bs.modal', '#myModal', function (event) {
if (event.target.id == 'uploadImage') {
// do stuff when the upload dialog is hidden.
}
else if (event.target.id == 'myModal') {
// do stuff when the outer dialog is hidden.
}
});
P.S.: As you may already know, the Bootstrap framework does not support overlapping modal dialogs. Be aware of this as you continue to nest modals within modals, especially concerning dismissal elements initialized via the markup API and data-dismiss="modal".
P.P.S.:

The second modal html doesn't have to be included in the first modal body. Include only the data-target link and move the second modal outside the first. This way the events will fire as you expect.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-dialog modal-sm">
<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">Demo Modal</h4>
</div>
<div class="modal-body">
<p>
Upload image
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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="uploadImage-title">Upload new image</h4>
</div>
<div class="modal-body">
Testing Area
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
<button type="button" class="btn btn-success">Accept</button>
</div>
</div>
</div>
</div>
http://jsfiddle.net/wytf57mL/3/

Extra scrollbar on modal of Bootstrap 3

I have looked through various questions on this site and other sites and tried their respective fixes but I haven't got any of them working for me. Whenever I open up my modal, an extra scrollbar is added. The extra scrollbar is of the modal, I know that, what I want to do is to hide the background-page's scrollbar so that it could prevent the background from scrolling. Right now, when the scroll of the modal is finished the background starts to scroll.
This is my modal's code:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 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="myModalTitle">Modal title</h4>
</div>
<div class="modal-body">
<p id="myModalContent"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button type="button" class="btn btn-default center"> <span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
Demo.
How could I prevent the background from scrolling?

Just add
body.modal-open {
overflow: hidden!important;
}
to your CSS.
Updated Fiddle