<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.
Related
I wanted to make a "flexible" confirm dialog with Bootstrap 4 as I do not want to hardcode each confirm modal / action on its own.
So, with a standard Modal like
<div class="modal fade" tabindex="-1" role="dialog" id="msgModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="msgModalTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="msgModalBody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Doch nicht</button>
<button type="button" class="btn btn-primary" id="btnModelConfirmMessage">OK</button>
</div>
</div>
</div>
</div>
and the respective js-magic :D
function showConfirm(htmlInput,headerTxt, fun){
$('#msgModalTitle').text(headerTxt);
$('#msgModalBody').html(htmlInput);
$('#msgModal').modal('show');
$('#btnModelConfirmMessage').click(function () {
fun();
$('#msgModal').modal('hide');
});
}
I thougth, that by sending the "action" part as function which will exceute as soon the "OK" button #btnModelConfirmMessage is clicked.
Works like a charm, BUT it has a major bug.
It seems that the event-handler stays on the modal, i.e. if I show and just hide the modal the OK button will fire the function twice.
Among others I found this post
Bootstrap modal firing up incrementing times
where it suggest to move the click() event outside. I am sure this would work on that specific task, however I would lose the function.
So how can I unbind the handler using the hide.bs.modal event?
After reading the jquery-doc the answer is fairly easy:
Change:
$('#btnModelConfirmMessage').on('click',function () {
fun();
$('#msgModal').modal('hide');
});
Then add a new call on the hide.bs.modal event
$('#msgModal').on('hide.bs.modal',function () {
$('#btnModelConfirmMessage').off();
});
This removes the previously added handler, so we do not stack-up the events.
Hope someone will find this usefull :))
Cheers,
Daniel
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 building my website using Twitter Bootstrap. I found that my dialog shows "2 times". Here is a video for you if you don't know what am I talking about(expire in 7 days).
Watch this video
Note: I only clicked the Close button one time. You can see there is a dialog appeared about I clicked Close and it disappeared in less than 1 second.
Here is my code.
<div class="modal fade" id="contactModel" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Contact</h4>
</div>
<div class="modal-body">
<p id="modelText">Thank you! Your submission has been received!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My button calls JavaScript.
<button onclick="submitForm()" type="button" id="submit" class="btn btn-primary">Send</button>
My JavaScript
$('#contactModel').modal('show');
Can anyone help me to solve this? Thanks in advanced.
I don't see your button's code, but I guess you've been using the bootstrap modal in both ways : via data attributes and via js.
Choose one. Look here http://getbootstrap.com/javascript/#modals in "Usage".
Anyway, if it's not the button, then your code works well. here is a proof: http://www.bootply.com/eYXtmm6Yrr.
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
I am trying to use Selenium WebDriver to click the 'OK' button in a modal that appears after submitting a form on a page.
Driver.SwitchTo().Alert() fails, and so does switching the window handle. I have also tried Driver.SwitchTo().ActiveElement() but that also fails. The driver is still recognising elements on the page before the button that opens the modal was clicked, so I know it is definitely not switching over, which makes Xpath and CssSelector useless for the meantime.
I have tried switching browsers but that doesn't have an effect.
<div id="confirmModal" class="modal fade">
<div class="modal header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Confirmation</h3>
</div>
<div class="modal-body">
<p>Confirm?</p>
<div class="alert alert-block">
<p> Are you sure? You can not undo this </p>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btw" data-dismiss="modal" value="Cancel" aria-hidden="true">
<input type="button" value="OK" id="confirmation-submit" class="btn btw-primary">
</div>
</div>
Any suggestions would be helpful - thank you!
I have solved a very similar problem to yours with the following code:
new WebDriverWait(driver, TimeSpan.FromSeconds(10)).Until(ExpectedConditions.ElementIsVisible(okButton_id));
IWebElement okButton = driver.FindElement(By.Id(okButton_id));
okButton.Click();
Clement's answer solved this for me. Except, I was using python, so what you need to do is invoke:
driver.implicitly_wait(1)
Or for more seconds if this doesn't work.