In my code, there are 2 sections (taken from the example) - Some Input and Some More Input. I only see Some More Input with a disabled scrollbar and some buttons on the left of the page. (look at it here)
Before you answer, I've already applied the patch BEFORE the main bootstrap-modal CSS and have both bootstrap-modal and modalmanager included. I've tried placing it everywhere, but it still shows up broken.
My code:
<div id="responsive" class="modal fade" data-width="760" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Responsive</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h4>Some Input</h4>
<p><input class="form-control" type="text"></p>
</div>
<div class="col-md-6">
<h4>Some More Input</h4>
<p><input class="form-control" type="text"></p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
So you should add this code below.
<button type="button" data-toggle="modal" data-target="#responsive">Launch modal</button>
http://getbootstrap.com/javascript/#modals
Look At the madal document, it explain how to use the madal method.
Well, fixed this myself. Found out that the examples on that page weren't compatible with Bootstrap 3, so I tried to write my own example with the Bootstrap docs.
(i am such an idiot for using examples)
Related
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?
I've below bootstrap modal. I'm just showing only 2 fields here. But I've more than 10 fields which are all mandatory. I'm doing javascript validation on click of Add button in Add_click(); and alerting user that All fields are mandatory. After click on Alert, the Modal window just goes off. I need this window to be retained until user gives all the details.
<div id="modalUserAddition" class="modal fade">
<div class="modal-dialog" style="width: 600px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">User Details</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" id="txtUserName" class="form-control" runat="server" placeholder="User Name" />
</div>
<div class="form-group">
<input type="text" id="txtPassword" class="form-control" runat="server" placeholder="Password" />
</div>
</div>
<div class="modal-footer">
<button type="button" id="Close" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="Add" onclick="Add_click();" class="btn btn-primary" data-dismiss="modal">Add User</button>
</div>
</div>
</div>
</div>
I tried below code, but it didn't work for me.
alert('All fields are mandatory!');
//$('#modalUserAddition').modal('toggle');
$('#modalUserAddition').modal({
show: true
});
Please help!
Remove data-dismiss="modal" from the Add button and close the modal in Add_click where the data is proven valid by adding:
$('#modalUserAddition').modal('hide');
I think you are clicking outside the modal when you click on the alert, and it is closing the modal due to its native behavior. You can use the backdrop option. Passing this option with value static will prevent closing the modal after clicking outside the modal.
<button data-target="#myModal" data-toggle="modal" data-backdrop="static">
Launch demo modal
</button>
Or you can do it via JavaScript
$('#myModal').modal({backdrop: 'static'})
DEMO
Since you're using Bootstrap, perhaps a better alternative would be to use its native alerts.
It would avoid your current issue and be more consistent.
It worked for me putting data-backdrop="static" in the button and return false; when returned the validations results.
I want to use some jQuery in my Modals. For like form validation, but the problem is more general.
I load the content of the modals from another html-file.
In Bootstrap 3.1.x it worked with just putting the jQuery code at the end of the html file from where I get my modalcontent.
But now with Bootstrap 3.2. the jQuery doesn't work anymore in the modals.
Outside of the modals they working fine.
Even if I call the contenpage not within the modal the jQuery works.
Here is some example code showing how I call my modals:
<a data-toggle="modal" href="dir" data-target="#inputModal">Some Button</td>
<div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-labelledby="inputModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
And the content.html for the modalcontent
<form name="contactdeleteform" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="moduleModalLabel">topic</h4>
</div>
<div class="modal-body">
<select id="modules" name="modules" class="form-control select2" multiple>
<option value="1">option 1 </option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
<button type="submit" id="contactDataSubmit" class="btn btn-primary" >Submit</button>
</div>
</form>
<script type="text/javascript">
$('.select2').select2({placeholder: "Bitte Auswahl treffen"});
</script>
using the select2 lib for better multiselection. For example I can't get this to work.
/edit: tried to explain the the Problem more clearly.
/edit2 : I checked the networks with the Firefox debugging tools and there is no jQuery call when I load the modal
if you add to your own jquery in bootstarp 3.2 use (noConflict) in your own jquery script
Example:
<form name="contactdeleteform" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="moduleModalLabel">topic</h4>
</div>
<div class="modal-body">
Body content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Back</button>
<button type="submit" id="contactDataSubmit" class="btn btn-primary" >Submit</button>
</div>
</form>
(No Changes it's working in my sys once check your total code )
http://jsfiddle.net/suryakiran/ffqhtr35/
once please do your project example in (http://jsfiddle.net). i will try to solve your problems. am also beginner in bootstrap. if you do your example in jsfiddle.net am learn more from you
I found a solution that a friend of mine sugested.
When you put the id of the modalframe into the jquery it works.
$(#modalid #idforjqueryelemnt).function()(...
So in the case of my problem I change nothing much but the jquery of the content.html
<script type="text/javascript">
$('#inputModal .select2').select2({placeholder: "Bitte Auswahl treffen"});
</script>
Hey guys I'm using bootstrap modal class for popping up window when a user leaves the page.
And what I need is to pop up the window using javascript not the button.
So it does not work and I'm stuck with it, any help is appreciated
Modal Window
<div class="modal fade" data-toggle="draftModal" data-target="#draftModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<p>You are about to leave the deal. Would you like to save as a draft?</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>
</div>
</div>
</div>
JS
<script type="text/javascript">
$(document).ready(function(){
window.onbeforeunload(function(event){
event.preventDefault();
$('.modal').modal('show');
});
});
You can not override the onbeforeunload dialog with your own, so unfortunately you better be working with it as it's intended. The dialog will show, but also the once coming with the intended event. Reference: http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
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.