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

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.

Related

how to trigger modal on page load

I have this html modal that is triggered by the button click
<button type="button" class="btn btn-success mb-1" data-toggle="modal" data-target="#largeModal">
Large
</button>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra
and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus
Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more
horse-like. All three belong to the genus Equus, along with other living equids.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
I want to trigger the modal on page load instead of button click. How can I do this?
if you're working with Bootstrap (then I also assume you're using jQuery), it's as simple as the following in the html of the page you're loading.
$('#largeModal').modal({show: true});
you could also just simulate a click on the modal trigger:
$('.mb-1').trigger('click');
of course, make sure this code comes after the markup with the modal. If that's not possible, you'll have to wrap it in a doc.ready like
$(function(){
$('#largeModal').modal({show: true});
})
or
$(function(){
$('.mb-1').trigger('click');
})
again, this assumes jQuery is assigned as $ in your code.
This is in plain vanilla JavaScript. If you put onload="callBack()" inside of your body tag, you can write a function to load the specific element (your modal in this case).
There are a variety of ways to do this. Most simply, you can select the element you want in a script tag and give it the style display: "inline" (or however you want it displayed). Note: you would have to make your modal hidden first by setting display: none
Example:
body:
<body onload="callBack()">
-elements here-
</body>
script:
<script>
var callBack = function() {
document.querySelector("#largeModal").style.display = "inline";
}
</script>
Hope this helps :)
These solutions will work:
<body onload="script();">
or
document.onload = function ...
or even
window.onload = function ...
Note that the last option is a better way to go since it is unobstrusive and is considered more standard.

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?

Show new page as Modal with Javascript

I'm working on an Python Flask application, were I'm writing python program, HTML5 and making use of Bootstrap too.I'm struck with Javascript, because I'm new to it.
I've an table in my page, where "id" be assigned to an value. I can able to get the id value using
<script>
$("table tr").click(function(){
alert (this.id);
});
</script>
I wanted to send the "id" value to another page, and open the resulting page as Modal. Can you guide or share sample code for the same...?
If you have already downloaded bootstrap plugin then my answer would be very easier for you.
Earlier i have written same thing that you required in PHP (have a look). Whatever be the language its about JQUERY and HTML5.
You just trigger the following line using JQUERY then it will open the second page content in modal format.
<a data-toggle="modal" class="trigger" data-target="#yourid" href="second_page.php" ></a>
Trigger the above line as
$("table tr").click(function(){
$('.trigger').trigger("click");
});
Your second page content should be like
<div id="yourid" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Give a title name</h4>
</div>
<div class="modal-body">
<!-- Place your second page content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal">Close</button>
</div>
</div>
</div>
Please refer this link also. Correct me if am wrong

Twitter Bootstrap 3 modal dialog not displaying

I have a twitter bootstrap modal that does not render the dialog box correctly and I'm not sure why.
HTML
<p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" data-target="#myModal2">Compare</button></p>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal2Label" 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-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal2Label">New Label</h4>
</div>
<div class="modal-body">
<p>Something for now.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can see the html in action on this page: Superfood Picker Click on the "Compare" button on the front page.
Based on the html alone I don't see why it doesn't work.
Other relevant points:
1). I have two modals on the same page.
2). The other one works fine.
3). When I switch the ID of the dysfunctional modal to the ID of the modal that displays correctly that modal also displays correctly.
4). The latter point would suggest to me that maybe it's the HTML that calls the modal that's the problem, but when I compare the two I don't see why one would work and the other wouldn't.
Here's the HTML for the second (functional) modal:
HTML (called through a jquery function)
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
I thought that maybe the two were interfering with one another, but if that was the case I'm not sure why the second one would work fine.
As mentioned above, the DIV with an ID of "part2" is display:none. The modal is inside that DIV. You need to make that DIV display block for the modal to be visible.

Jquery backdrop modal popup

I am looking for jQuery modal popup which should display image like sample check to show routing number etc,.. When I click on a Routing number(?)question mark it should pop-up an image and should have closing button on the top right corner. I have seen different approaches but couldnt find exact one
Check out the Bootstrap Modal. Click the Launch demo modal button.
In <head> make sure you include the javascript for jquery and bootstrap.js. You can download bootstrap.js from the bootstrap site. You also might want to include the bootstrap.css as well.
Once your <head> is all setup, in your body you need to add the modal code which will be hidden and you'll need to add a button to show the modal. The button and modal are linked together by id.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>

Categories