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 :)
Related
I am using the intro.js "hints" plugin (https://introjs.com/example/hint/index.html, https://introjs.com/docs/hints/api/) on a bootstrap web site. I need the hints to work on bootstrap modals, however the hints are displayed behind the modal window. I tried adjusting the z-index of the .introjs-hint-pulse and the .introjs-hint-dot selectors and the .modal selector with no results.
Any ideas on what I need to do to get the hints to display above the modal window as needed?
I also need to figure out how to hide all of the displayed hints at once, but then be able to show them again when the link is reclicked - like a toggle. I have one icon used to show the hints, and I want to be able to click again to toggle and hide the hints.
I am including links to the hints API, as it shows the options for refreshing and hiding the hints, but I am new to jQuery & JS and am not sure how to get it to work.
Also, I am trying to figure out a way to auto hide the hints on the modal if the modal is closed with them still visible.
I have a jsfiddle with a test modal and the intro.js hints. If you open the modal, then click on the "Show Hints" link, you will notice the hints are not visible. But if you close the modal you can see the hints are visible behind the modal window.
JS Fiddle link: http://jsfiddle.net/1aeur58f/998/
HTML of example:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<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">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="bottom-right-aligned" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></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>
The intro.js and introjs.css are linked in the jsfiddle external resources for viewing.
Try with this CSS:
.introjs-hint {
z-index: 9999999 !important;
}
In order to toggle hints you can (for example) do this:
var hints = false;
function toggleHints() {
if (hints) {
$("#txtToggle").html(" Show Hints");
introJs().hideHints();
} else {
$("#txtToggle").html(" Hide Hints");
introJs().showHints();
}
hints = !hints;
}
Check the fiddle updated: http://jsfiddle.net/beaver71/fc0rkakn/
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'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 Have the modal set like this
<body>
<div class="modal fade" id="pageopen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">
x
</button>
<h4 class="modal-title" id="myModalLabel">
This Modal title
</h4>
</div>
<div class="modal-body">
Add some text here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary"> Submit changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<button onclick="showModal('http://www.google.co.id/')">Show Modal</button>
</body>
I've added the latest jquery, bootstrap js and css for only the modal plugin.
The problem I have is that the modal backdrop shows, however the modal header body and etc isn't showing up.
My Code
Please provide solution, thank you
Your Javascript Code is wrong, to open a Bootstrap 3 Modal you should use:
$('#pageopen').modal({
show: true
});
If you want to load an external Page, you can set the url here:
$('#pageopen').modal({
show: true,
remote: 'http://www.example.com'
});
And better use the jQuery click Function instead of "onClick".
Your problem is that the showModal function isn't found by onclick, please stop using onclick in your html forever. That has never been a good practice.
Instead of this set an ID for button and use the .click function in JQuery:
<button id="showModal">Show Modal</button>
$("#showModal").click(function(){
$('#pageopen').modal();
});
Check JSFiddle Demo
Haha, never mind. I have separate js and css for the same bootstrap component so it overlapped over each other.
Tip for bootstrap :
Always load only one js file and one css file for bootstrap.
If you're like me that want's only part of the bootstrap instead of all the package, (e.g: modal, transition and carousel), then make it as one js and css from getbootstrap
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