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.
Related
I am trying to make a Javascript JQuery registration form pop-up on link click.
So I have this button:
REGISTER NOW
And I`m trying to make it pop-up a small simple html registration form that I can store in a hidden registration DIV. Example:
<div name="reg" style="visibility:hidden;">reg form</div>
I just need the simple registration form (Only full name and email) to pop-up (centered and mobile responsive) when that button is linked.
Can I get any help in doing this? Thank you.
I have tried with jquery dialog and almost everything found on Google, but it doesn't seem to work.
Thanks.
As suggested by Mihailo, you could use Bootstrap Modals to make it responsive (mobile, tablet and PC).
<a data-toggle="modal" data-target=".bs-example-modal-sm" role="button" class="">Launch demo modal</a>
<div class="modal fade bs-example-modal-sm" 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">Registration</h4>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="user-name" class="control-label">Full Name:</label>
<input type="text" class="form-control" id="user-name">
</div>
<div class="form-group">
<label for="email" class="control-label">Email Address:</label>
<input type="text" class="form-control" id="email">
</div>
</form>
</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>
Here is the thing, there is a modal template with header section, body section and footer section.
div class="modal fade bs-example-modal-sm"
If you remove fade, then the modal will not animate.
More information regarding bootstrap modals is here
Also, Please find the corresponding JsFiddle below:
https://jsfiddle.net/Manoj85/7egtc2ne/5/
Hope this helps!!
You should really be using a class or id on you register div instead, but you can show the form like this:
$('.cta').click(function() {
$('div[name="reg"]').css('visibility', 'visible');
})
Once you give your div a proper class/id, you can replace div[name="reg"] with .class or #id. Additionally, jQuery has several built-in functions for hiding and showing elements. To use these, you'll want to change visibility:hidden; with display:none;. Then, in the code I presented above, replace .css(...) with one of the following:
.show() is an immediate effect, and is the same as changing the display property to block. To remove again, use .hide().
.fadeIn(), as the name suggests, is more of a gradual fading effect. Opposite of .fadeOut().
slideDown() is similar to an "accordian" effect, where the element starts at 0 height and "grows". Opposite of .slideUp().
You can also use .toggle(), .fadeToggle(), or slideToggle(), respectively to alternate between showing and hiding the elements.
I've created this JSFiddle to demonstrate these effects.
Assuming you have a div called register, which you need to add, it will be like this:
<script>
$(".cta").click(function() {
$("#register").css("hidden", false)
})
</script>
I have a modal window but when I close the modal my page is blocked. I can not do anything. I need to refresh the page to get everything working again!
The strange is that sometimes everything works well or sometimes everything is blocked!
The button that opens the model:
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalCode">Approve</button>
My modal window code:
<!-- Modal-->
<div class="modal fade" id="myModalCode" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form id="formUpdateProgress" >
{!! csrf_field() !!}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Complaint Progress</h4>
</div>
<div class="modal-body">
<label class="control-label">Insert code:</label>
<div id='complaintProgress' style="position: relative;">
<input type="text" name="code" id="code" placeholder="Insert the code here">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- END MODAL -->
When I submit the form, I close the model!
$( '#formUpdateProgress' ).on( 'submit', function(e) {
$('#myModalCode').modal('hide');
});
EXAMPLE:
Modal window in my application:
Then I click Submit, everything works ok, the document is approved but something is locking the page:
Any idea why the page is blocked? Thanks in advance
Similar issues is discussed in here:
How to hide Bootstrap modal from javascript?
Seems that you have some issues in the way how your modal is handling the submit. Perhaps the easiest fix would be as was mentioned in one of the comments from the link above, add the following fix to remove the backdrop:
$('.modal-backdrop').hide();
Alternatively, you may even remove() it. I'd think, modal will re-create it again, if open.
It's looks like you are using bootstrap modal.
Bootstrap open not only modal, but page mask too. So you need to call bootstrap method to close. With code inspector you can find that body got class="modal-open" and extra div with "modal-backdrop fade in"
Just use <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> or yr element with 'data-dismiss="modal"' and all be ok)
function closeModal(name){
$("#"+name).modal('hide');
// I added the next line
$('.modal-backdrop').hide();
}
After I add the $('.modal-backdrop').hide(); everything its ok :)
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
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)