I want to use bootstrap modal in my page. At the same time, when modal trigger button is clicked, I want to do something in javascript also. It's not working.
<button type="button" class="btn btn-primary center-block" id="start_quiz" data-toggle="modal" data-target="#myModal">
Start Quiz
</button>
The button on clicking lauches modal but unable to call:
$('#start_quiz').click(function(){
alert("hello from javascript");
});
How can I achieve both results at the same time? Please help me.
Remove the data-toggle="modal" data-target="#myModal" attributes from the button, so that it doesn't open the modal.
Then check that the "hello from javascript" displays - it should do.
Then open the modal from javascript code instead, add this line below your alert:
$('#myModal').modal('show')
This should now make the alert, then show the modal. You can always reverse the two if you want the modal shown first.
Second option, hook into the shown method and write your javascript there:
$('#myModal').on('shown.bs.modal', function () {
// alert here
})
Related
I have a Bootstrap modal with this button
<button class="btn btn-primary" type="button" id="send" data-btn-action="send">Send</button>
On the main page, where the modal is, I have the same button as above but with a submit type. So, on click of the modal's button, it triggers the button on the page. It works fine, but the data attribute is NULL if it's triggered from the modal but if I click on it directly, I get the data attribute value
My JS
let actionBtn = $("#send").attr('data-btn-action');
Thank you.
I want to trigger to buttons by clicking on a third button. One of my buttons submits data to a PHP file and the second one loads a bootstrap modal. When I run it, I feel that both are triggered, although the submit button works fine but the bootstrap modal disappears in a blink.
this is the code:
HTML
<button onclick="submitdata(); showbootstrapmodal();">Click to Trigger the two other buttons</button>
<button id="submit" name="submit" type="submit" form="#myform"></button>
<button id="modal" data-toggle="modal" data-target="#myModal"></button>
and here is the javascript code for the functions:
javascript
function submitdata(){
document.getElementById('submit').click();
return false;
}
function showbootstrapmodal(){
document.getElementById('modal').click();
return false;
Is there a flaw in my code?
Try removing 'return false;' from submitdata()
function submitdata(){
document.getElementById('submit').click();
}
I am trying to detect when the bootstrap confirmation is opened and closed but I am having no luck with detecting this. I am using an <a> tag to trigger the confirmation (code down below), and trying to detect this is jquery.
<a class="delete" data-toggle="confirmation" title="" data-original-title="Delete Row?">
<i class="fa fa-trash-o"></i>
</a>
I originally tried to detect the button click but failed in doing so. It would be better if the confirmation is able to trigger a function once opened and closed.
You may you "data-on-confirm" and "data-on-cancel" attributes to register your callbacks for those particular events.These are given in the documentation provided by the bootstrap confirmation plugin.
Eg
<button class="btn btn-default" data-toggle="confirmation" data-singleton="true" data-on-confirm="myAcceptFunction" data-on-cancel="myRejectFunction">Confirmation 1</button>
Use events, e.g.:
var modalIsShown = false;
$('#myModal').on('shown.bs.modal', function () {
modalIsShown = true;
});
$('#myModal').on('hidden.bs.modal', function () {
modalIsShown = false;
});
http://getbootstrap.com/javascript/#modals-events
I ended up finding my answer thanks to the other answers getting me there. The code simply looks at the trigger button which in my case has a class name of delete and then looks for a <div> with the class name popover to see if it is visible or not.
if ($(".delete").next('div.popover:visible').length){
//do something
}
I am using knockout js and bootstrap. I have a list of users with a delete button on each row.
I also have a bootstrap modal dialog that has a confirmation message whether to delete the user or not.
I have a click binding on the delete button that can remove the user from the model. How do i change it so that the deletion happens after the user has confirmed.
I have searched several examples and they all suggest to use custom bindings, and the closest i found was this fiddle example
http://jsfiddle.net/snaptopixel/vDZQk/
The one problem with this example is, it uses a pre-defined item from the model in the modal popup, what i want is to automatically bind the item that was deleted by the user and show the user name and other properties in the modal window and ask for confirmation.
Here is my modal dialog
<div class="modal-body">
<div class="well">
<p>By clicking 'Yes', you will remove the User 'foo' from the system. This action cannot be undone. To cancel this action, click 'No'. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
For example...
The modal window will say "Are you sure you want to delete User 'foo'? I would like to have access to the selected User inside the modal window.
Thanks for your help
Set a click binding on the 'Yes' button to the function that actually does the deletion, and set the click binding on the delete button to a function that displays the modal. You'll probably want that function to store the current item in an observable (itemToDelete or something like that) so that the actual delete function knows what to delete.
I have a modal window but I want to set up a close function so that when the user clicks on the "button", it will close the modal window. Does anyone know how this can be achieved?
I have a link to the application so you can view it here
Below is the javascript code where it shows the function of opening the modal window and the setup function of where I want to place the code to close the modal window:
function plusbutton() {
$(".previouslink").modal();
return false;
}
function closewindow() {
return false;
}
Below is the form code where user clicks on the plus button and it displays the content within the "previouslink" div tag:
<form id="QandA" action="imageupload.php" method="post">
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
<tr>
<th><a onclick="return plusbutton();">
<image src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a><span id="plussignmsg">(Click Plus Sign to look <br />
up Previous Questions)</span> </th>
</tr>
</table>
<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>
<button type="button" id="close" onclick="return closewindow();">Close
</button></div>
</form>
Your Live-Example shows me, that you seem to be using SimpleModal
From the documentation:
CLOSING THE DIALOG
SimpleModal will automatically bind the close
function (using the onclick event) to any element inside the dialog
with the simplemodal-close class. In addition, you can
programmatically close the currently opened dialog by calling
$.modal.close();
Means: In your closeWindow()-Function, you could simply enter the line:
$.modal.close();
and be done.
I've used this jQuery reveal modal plugin on several sites and it has worked great for me.
Alternatively, you should check out jQuery Impromptu. I love the tour feature myself, but the modals are more likely what you are trying to accomplish.
The code from both examples will probably lead you to what you are specifically looking for :)