I'm using Meteor and Iron Router, and I have a modal dialog that won't hide the backdrop when it gets dismissed. To be more accurate, I want that after clicking the dismiss button, the iron router will redirect to another page. The redirection code does work, but the backdrop stays visible. If I remove the routing line - the modal is dismissed and so does the backdrop.
Here is the modal's markup:
<div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
This cannot be undone.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" id="confirm-yes-button">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
Here is the button that toggles the modal dialog:
<button type="button" id="delete-recipe-btn" data-target="#confirm-modal" data-toggle="modal" class="btn btn-primary btn-danger pull-right">Delete</button>
Here is the click event on the 'yes' button of the confirm modal dialog:
'click #confirm-yes-button': function() {
Recipes.remove(this._id);
$('#confirm-modal').modal('hide');
Router.go('/');
}
Why would the routing leave the backdrop visible?
There are multiple solutions to this, depending on exactly how you desire the behavior. If you want the modal to hide first, then change the page, you can use a callback on the modal's behavior.
'click #confirm-yes-button': function() {
Recipes.remove(this._id);
$('#confirm-modal')
.on('hidden.bs.modal', function() {
Router.go('/');
})
.modal('hide');
}
As to your question of why the backdrop is visible - its complicated. The backdrop is only hidden once the "hide" animation completes, and changing the page interrupts/stops this behavior.
One of the solution would be to use jQuery methods to remove backdrop
once the user has been redirected.
Accounts.onLogin(function(){
Router.go('/');
$('.modal-backdrop').remove();
});
However to use this method you need have access to Accounts.login method which can be acquired by adding
gwendall:auth-client-callbacks
package to your meteor project
Related
For my project, I want to implement a modal. I am using Bootstrap 4. The modal should work as following:
When I press the button in the first .html page, the button should redirect me to a second .html page, meanwhile open a modal in that second .html page as a welcoming.
So the modal in that case is like a welcoming message as a popup box.
To make things clear. The button "code" is in the first .html file, the modal "code" is in the second .html file.
Button:
<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
data-toggle="modal" data-target="#modalLogin">Prijavi se</button></a>
Modal:
<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLoginLabel">Pozdravljeni!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Dobrodošli v digitalnem gradbenem delovnem listu.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Nadaljuj</button>
</div>
</div>
</div>
</div>
I tried everything. from id's, to trying to relocate the code, to trying to find another solution, with JavaScript, but no luck so far.
A click on your <a> cannot open a modal in another page that is about to be opened. Instead, what you do is you slightly modify the href of your <a>, for example: .
Then, in your JS (that is being loaded with index.html) you can check if there is a 'welcome' in your URL when the user navigates to the page. If there is, you trigger the modal to show. It would look something like this:
$(document).ready(function() {
if (window.location.href.indexOf("welcome") > -1) {
$("#modalLogin").modal("show");
}
});
This way, when the user navigates to index.html the modal doesn't show, but if the user clicks on your button, the modal will be displayed because the URL will contain welcome.
<div class="modal" id="myInquiry" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 id="myModalLabel">Thank you for your feedback:</h4>
</div>
<div class="modal-body">
<label for="inquiry">Feedback:</label>
<textarea class="form-control" rows="5" id="inquiry"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal" id="send">Send</button>
</div>
</div>
</div>
</div>
This is the code I have for my modal footer. I am wanting to click the send button and close the modal. Once it has been closed I want to have an alert window or modal pop up and thank the user for giving their feedback. I am new to web development and am getting stuck on this issue after numerous attempts (after finding different solutions on other questions) but nothing is working.
The modal's div id is 'myInquiry' if that helps.
Thank you!
You need to add an action to your modal Close button, worst way would be like:
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="alert('thank you');">Close</button>
you can add the ID to the button and then use jQuery to handle the action, and show something better than this.
You can add jQuery code like this.
$('button#send').click(function() {
alert('Alert Content');
}
Then you can see the alert "Alert Content" when you click the Send Submit button.
Bootstrap modal has a hide.bs.modal event, you can listen to that event and then, when the modal is closed (hidden from user) you can show the thank modal. Here is an example on jsfiddle. Cheers, sigfried.
Maybe you can try adding an
onclick="window.alert('<Your text here>')"
attribute to the button.
Most of the answers on SO are either about how to activate a modal dialog box or how the dismissal works.
However what I find lacking is how to trigger an action that the default button signifies.
For example,
the default action of this dialog is 'Save'.
Here is the html markup
<!-- Modal -->
<div class="modal fade" 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">Dialog</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn-save" class="btn btn-primary btn-save">Save</button>
</div>
</div>
</div>
</div>
If I call $('#myModal).modal('show'), the dialog box will appear.
If I click on the cross on upper right corner or the 'Close' button, the dialog box will be dismissed as expected.
However, when I press 'Save', nothing happens.
I used a round-about way to implement it:
It is written in coffeescript.
$('#myModal).on('click', _.bind(#_handleSave, #))
$('#myModal).modal('show')
Then inside _handleSave,
_handleSaveProfile: (data) ->
return unless data.target.id is 'btn-save'
# Do saving
# ...
I don't think it is the right way because it intercepts every click event.
What is the proper to implement this function?
bind the click event to the button instead of the modal :
$('#myModal').modal('show')
$('#btn-save').on('click', _.bind(#_handleSave, #))
I'm new to Bootstrap and i'm facing problem with this example:
<!-- Trigger the modal with a button -->
<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 per my understanding data-dismiss="modal" attribute should close the modal if you click on it, but i don't understand how it works behind the scene. I checked the official documentation at: http://getbootstrap.com/javascript/#modals-examples but there's no explaination.
The hiding functionality is implemented in the modal.js in this way.
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
Basically it's just finding the elements that have the attribute of data-dismiss and the value of modal. Upon click it will hide these elements.
replace data-dismiss="modal" by: onclick="$('#modal_id').modal('hide');"
You should have something like this:
<button type="button" class="close" onclick="$('#modal_id').modal('hide');" aria-label="Close">
onclick="$('#modal_id').modal('hide');" will close only the particular modal in which it is placed.
please note if it is this answer is useful.
If u use multiple modals on one page open at the same time on top of each other dismissing the topmost with data-dismiss="modal" will hide all active modals.
exactly in bootstrap.js find the element with attribute data-dismiss="modal" and trigger this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) behind. i.e. it hides the element but in more complex way.
It is roughly equivalent to onclick="$(this).closest('.modal').modal('hide')", i.e. it is searching the DOM upward for .modal (means, the definition of dialog itself) and hides it. The dialog's DOM is not removed.
I triggered the data dismiss with JQuery like so
$('.close').click();
This triggered like if user would of clicked the close button on modal, making data-dismiss hit. You might run in to some issues if there is layers of modals at one, hence will close all.
reference to where I found my solution here
I am using Twitter Bootstrap's (v3.1) modal dialog and when I show a dialog and dismiss it, any buttons that were not on the screen when the modal displayed are no longer clickable in IE 11.
As shown in the above illustration, the I have multiple buttons to show modals and they are further down the page than where the modal displays (at the top of the page). The first modal displays properly. However, once I dismiss that modal and scroll back down the page to click on another button, the buttons are no longer clickable.
My button code:
<button type="button" id="btnPreviewSales" name="btnPreviewSales" class="btn btn-default" data-toggle="modal" data-target="#previewSalesModal"><span id="btnSalesPrevImg" class="glyphicon glyphicon-eye-open"></span> Preview Sales</button>
My modal code:
<div class="modal fade" id="previewSalesModal" tabindex="-1" role="dialog" aria-labelledby="previewSalesModalLabel" 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-hidden="true">×</button>
<h4 class="modal-title" id="previewSalesModalLabel">Preview Sales</h4>
</div>
<div class="modal-body">
<img src="preview.jpg" alt="Sales Preview" class="img-responsive" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It works fine in other browsers (Chrome, Firefox) and I have the X-UA compatible tags properly set. What can I do to get the buttons clickable again after dismissing the modal in IE?
Ok, I found a solution. I also noticed that the modal was jumping to the top of the page each time and went looking for a solution to that problem. I found Bootstrap modal: background jumps to top on toggle and the recommended the solution was to override a bootstrap style:
body.modal-open {
overflow: visible;
}