I am using BootStrap and have an alert for cookies that looks like this:
<div class="alert alert-info fade in">
<button class="close" data-dismiss="alert" aria-label="close" title="close">×</button>
<strong>Info!</strong> This site uses cookies, by using this site you consent to the use of cookies.
</div>
But I want to be able to have an onclick event that does the same as the close button, and after many Googles (and soul searching if it's worth it...) I have come up with nothing.
Can anyone aid me with this? (Either doing in JavaScript/jQuery or HTML is ideal, thanks in advance :))
I cant believe it was this simple in the end... I fixed it with this:
<div class="alert alert-info fade in" data-dismiss="alert" aria-label="close" title="close">
...
</div>
Just copy and paste the data-dismiss etc. into the div element...
You can do achieve it this way --
$('.alert').click(function(){
$('.alert').alert('close')
});
.alert is the class name of the alert box or you can give the alert box an id and use to close it programmatically
Related
Hey guys can someone help me. with the jquery file that without having to go online for Googleapis,that will make my bootstrap well work correctly when its entirely offline... am trying to activate a notifications if successfull message so that the user may cancel bt the cancel b"X" isn't working.... Below is a link to my project files kindly have a look
Bootstrap project files
You have made spelling mistake that's why it is not closing the 'ALERT'
HERE:
<div class="alert alert-danger fade in">
<a href="#" class="close" data-dissmiss="alert" aria-label="close" >×</a>Don't forget Ramsey's Birthday
</div>
Mistake:
data-dissmiss="alert" // DISMISS
not DISSMISS
Use This:
<div class="alert alert-danger fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close" >×</a>Don't forget Ramsey's Birthday
</div>
So I add this code dynamically when the user clicks a button (data is passed in as a parameter from an AJAX call, that all works fine):
$('#container').append('
<div class=" alert alert-danger alert-dismissable fade in" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4>Error</h4>
<p>'+data+'</p>
</div>');`
I was wondering if it was possible to add functionality to auto close this alert after a certain time. I know there are other ways to go about doing this where I could easy accomplish this, I'm just looking to do it this way because I want to have multiple alerts when the same button is clicked, so having each alert handle itself and disappear automatically would make it look a lot cleaner.
Sounds like you can use setTimeout Javascript function:
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout
Well, the title says it all. I have a default (copied from Bootstrap docs) modal which opens using $('#myModal').modal(); but under no circumstances the modal closes with the dismiss X or cancel button. Console doesn't log any errors. When I press ESC or at any point in the gray transparent overlay it does get closed.
For the sake of being sure I've disabled all other javascript code in my project. I've been staring at this for an hour now. What am I missing? Have done this many times before but I'm baffled with this behavior...
I've just found that with bootstrap 4 if you create a modal with javascript and add it to the document to display it it doesn't set any listener events for the data-dismiss action, so have had to do it myself:
$('#modalId').on('click', 'button.close', function (eventObject) {
$('#modalId').modal('hide');
});
Check if you have data-dismiss attribute as follows
In X icon
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
Close Button
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
If you have them, please copy and paste your code that might help to identify what is causing the problem
Does the close button have data-dismiss="modal" ?
From bootstrap:
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
You could try to toggle or hide manually,
$('#myModal').modal('hide')
Well, after I was sure I'd ruled any external factor out I tried using the bootstrap javascript file from BootstrapCDN.com rather than my pulled in version using composer. You know what? There was a bug in my pulled in version causing this behavior...
I have been attempting to get greasemonkey to close a modal by clicking the "x" button. Here is the code for the page.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onClick="window.location.reload()">x</button>
I've tried using document.querySelector('.close').click() but to no avail. Where am I going wrong here?
The page in question is running javascript and ajax.
The code looks like bootstrap modal, so look for the main container ID or class name and use the following code.
$('#modalID').modal('hide');
Why don't you just add the hide class to the modal? That's all that clicking it is going to do.
I am changing the alert message dynamically:
<div id="alert" hidden="hidden">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
$('#alert').addClass("alert alert-danger alert-dismissable")
.text('Fail to get upload information from YouTube.')
.show();
but the dismiss button is not shown.
With the execution of the .text() method you are ending up changing the entire content of the div#alert. However, going by your question, it seems you just want to append the text to the div keeping the button inside the div intact.
That can be achieved with the .append() method instead.
This should work:
$('#alert').addClass("alert alert-danger alert-dismissable")
.append('Fail to get upload information from YouTube.')
.show();
As you've asked to replace an existing text, I would suggest this:
1) Place the previous text inside a span which you can reference later
2) Unhide the div#alert and at the same time change the text of the child span with a new message keeping everything else inside the div in place.
For eg:
If you have your html like this:
<div id="alert" hidden="hidden">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">Hello</button>
<span id="message">Text before script execution</span>
</div>
then the following script will work fine:
$('#alert').addClass("alert alert-danger alert-dismissable")
.show()
.children('#message').text("Text after script execution");
PS: Sometime later if you wish to add html content inside the span, then .html() will work for you, whereas .text() will just treat the contents as text and not render as html code.
use .append instead of .text: Working demo here
$('#alert').removeClass('alert alert-info alert-dismissable').addClass("alert alert-danger alert-dismissable").append('Fail to get upload information from YouTube.').show();
The simplest solution I can think of is just a minor modification to your code.
<div id="alert" hidden="hidden">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
</div>
$('#alert').addClass("alert alert-danger alert-dismissable")
.text('Fail to get upload information from YouTube.')
.append('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>')
.show();
This should do what you want. The button vanishes because it's no longer a part of the div tag. Appending it using append() will add it after whatever text you want to put in the div.