Bootstrap modal appearing under background in AngulaJS application - javascript

This question might be flagged as duplicate but my issue isn't solved by the things mentioned in the relevant SO thread, here is the link to that
I have to make a modal with an Image into it and stack it into an existing AngularJS application. So, by far what I have done is this. When I do data-backdrop="false", the whole black tint gets removed and that's pretty obvious. But I don't want that. I want the black tint to remain there but behind the modal not stacking on top of it.
How can I do that, without using jQuery.
Here is my code:
<li ui-sref-active="active">
<a href="javascript:;" data-toggle="modal" data-target="#myModal">
<i class="fa fa-bullhorn" style="color: #fff200"></i>
<span id="glow" style="color: #fff200">What's New</span>
</a>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" style="color: #000"><strong>New Features</strong></h3>
</div>
<div class="modal-body">
<center>
<img ng-src="{{'images/'+ 'Screen.png'}}" alt="New Features Screenshots" class="img-thumbnail img-responsive">
</center>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</li>

I used to have the same problem like you when using angularjs with bootstrap. Changing z-index of the dialog and the back-drop fixed the issue for me. Hope this helps you.
.modal-backdrop {
z-index: 1040;
}
.modal {
z-index: 9999;
background-color:transparent!important;
}

Hey i know this question is a bit old, but i found a bit of a modification to work for me.
i was using angular cli > 6.0.0. I also used ng-bootstrap version 2.0.0
go into styles.css right under src, use
.modal-backdrop{
z-index: 20;
}
i found that the .modal had a z index of 40 so i just modified the backdrop to have a 20 z index.

Related

modal-backdrop fade show in bootstrap

Problem
I am stuck with bootstrap issue(probably). I have modal in my HTML file. When I called that modal it shows up with a fade-in effect. `
My modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<a type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Number :</label>
<input type="number" id="replyNumber" min="0" data-bind="value:replyNumber" class="form-control">
</div>
<div class="form-group">
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
In Here, the page displaying div that I never defined.
This modal works fine, But the issue is after this modal popup, I want to navigate another page using a router link. In that route I noted that <div class = "modal-backdrop fade show"</div> is still showing in my dev tools. As a result, I can't even click a button on that page. That page fully disabled.I'm really not good at frontend development, I stuck on this whole day, Please help me. Thanks!
NOTE
I have looked at this question on SO. But it didn't help me. Because I am not using jquery as an external library. I am not using CSS either.(This is my school assignment So I avoid using JS or jQuery)
UPDATE
Here is the way I open my modal
<div class="card text-center" *ngIf="touched">
<img class="card-img-top" src="../../assets/svg/mailSent.svg" alt="Card image cap" style=" display: block;
margin-left: auto;
margin-right: auto;
width: 10%;">
<div class="card-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">ENTER CODE</button> <!-- This is the button that I use to open my modal -->
</div>
</div>
Demo the component that you openend modal implements with OnDestroy then
ngOnDestroy(){
// dismiss your modal here
}
Inside modal, use data-dismiss property on element you use to close the modal. Like this: <a class="btn btn-primary" data-dismiss="modal" (click)="emit()">Yes</a>

a panel or modal underneath a modal

Im new in web application and i came across the modal feature in bootstrap, i did researched and came across some examples that works perfectly fine but when i tried to copy what they did, an underlying image or panel or i dont know displays behind the modal... how to remove this? ive been trapped in this thing for like 3 days.. haha.. thanks...
Here is the image:-
and the code from w3schools... this should work but i dont know why..
<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>
As I checked your code of modal, This is coming fine.
check here
The problem is in your html kindly show us the entire html so that we can debug your code.
hi your code is working just fine. i find no problem with it.
output of the code
hopefully problem with the browser?

Bootstrap's Modal box - background doesn't fade out on show

I'm currently working on a C# MVC application. I'm using Twitter's Bootstrap's modal boxes as a 'popup' window. This has worked flawlessly in the past, but for some reason it doesn't right now. The result I get right now is shown below. Don't mind the blur, I did that.
Naturally the background is supposed to get grey, faded out like always, though for some reason it doesn't right now. I've basically copy pasted the code that works elsewhere and changed the values. I double and triple checked to make sure I didn't make a mistake somewhere, but I honestly can't see it.
I've pasted the relevant code below. JQuery gets loaded in the layout file. This is a partial view for the record
<button id="btnAddNewSecureFolder" onclick="openTheCreateWindow()" data-toggle="modal" data-target="#modal-new-secFolder" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone">Add a secure folder</button>
#*<button onclick="openTheCreateWindow()" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone" id="btnAddNewSecureFolder">
Add a secure folder
</button>*#
<div class="modal" id="modal-new-secFolder" tabindex="-1" role="dialog" aria-labelledby="modal-new-secFolder" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add a new secure folder</h4>
</div>
<div class="modal-body">
#Html.Partial("CreateNewSecureFolder")
</div>
</div>
</div>
</div>
<script>
function openTheCreateWindow() {
$('#modal-new-secFolder').modal('show');
}
</script>
Check in Chrome Developer Tools if
<div class="modal-backdrop fade in"></div>
exists right before closing </body> tag.
Styles for this div:
Also try to remove
aria-hidden="true"
attribute from your modal dialog.

Bootstrap Modal not showing up

Im trying to open a modal when an image is clicked with this code:
<img class="featurette-image pull-right" src="http://i.imgur.com/96C9Nij.png">
<div class="modal fade" id="download" tabindex="-1" role="dialog" aria-labelledby="downloadlabel" 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="downloadlabel">Download & Install Pixelmon</h4>
</div>
<div class="modal-body">
<p>
<strong>Installing Pixelmon</strong><br /><br />
First, you'll need to install Forge, so simply double-click "minecraftforge-installer-x.x.x-x.xx.x.xxx" and a menu will pop up for you to install forge.
</p>
<p>
Once you have done that its recommended you open the minecraft launcher, create a new profile, and select the forge version from the version dropdown.<br>After this launch minecraft and check if forge is running properly.
</p>
<p>
Now that forge is installed, you only have to copy "Pixelmon x.x.x.zip" to your %appdata%\roaming\.minecraft\mods folder.
</p>
<p>
You will need to use the previously created profile ( the forge profile ) to play with Pixelmon.
</p>
<p>
Now that you have Pixelmon installed, you may beggin your adventure on play.pokemasters.org
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger">Download Pixelmon</button>.
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The thing is its not appearing when I click the image.
Have you tried, $('#download').modal("show"); ?
There are more than one way to show or popup your modal.
You can show your modal with out using script or onclicks.
Here is the Example:
<a href="#" data-toggle="modal" data-target="#download">
Now in modal give id same as you wrote in data-target which is already done in your code 2nd use class="popup" instead of your current class,
<div id="download" class="popup">Your modal items/elements </div>
this approach will ease you with extra coding and time.
You can also show or popup your modal with the use of onclick property,
here is an Example:
<a href="#" onclick="showmodal()" data-toggle="modal" data-target="#download">
Modal
<div id="download" class="popup">Your modal items/elements </div>
Script
here just call your modal by id with .modal property to show or popup.
function showmodal()
{
$("#download").modal("show");
}
I hope it will help you and others in future.
Tip :You can use both data-target and onclick for one modal as well.

Twitter Bootstrap 3.0/JQuery 1.9.1 Modal Rendering Incorrectly

I've gone through a bunch of the articles on this and tried many things and just can't figure out what is going wrong. Basically I've added a very simple modal to my page and when I invoke 'show' it fades the background and brings up a very messed up looking version of the modal, and only when I remove 'hide'.
Please look at the JSFiddle code before answering, any links you post I can all but guarantee I've already visited. Thanks!
http://jsfiddle.net/tY3Nj/
Here is the HTML:
<div id="assignModal" class="fade modal" role="dialog" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Add Assignment</h4>
</div>
<div class="modal-body">
Use me to add an assignment!
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Looks like you're using version 2 markup with version 3 CSS and JavaScript.
See http://getbootstrap.com/javascript/#modals for the proper v3 markup.
<div class="modal fade" id="assignModal">
<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">Add Assignment</h4>
</div>
<div class="modal-body">
<p>Use me to add an assignment!</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Updated demo here - http://jsfiddle.net/tY3Nj/1/
When upgrading major versions, you should always take care to read any notes and especially migration guides. From Migrating from 2.x to 3.0 - Additional notes...
Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections now get wrapped in .modal-content and .modal-dialog for improved mobile styling and behavior.

Categories