Offline Bootstrap jquery error when trying to use Wells in bootsrap - javascript

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>

Related

bootstrap modal does not load on second click

I am showing notifications on modal with ajax call, ajax and php code is fine, It shows notifications on modal only first time, on second click at anchor it does not load "modal-dialogue" div and "modal-content" but it loads "modal fade modal-form in" div. When I debug it I saw display none on both above div's I know I can handle them with javascript, but I think that's not the solution.
What I am missing there, please guide
<a class="flag-list" href="#" data-toggle="modal" data-target="#user-flag">
<i class="icon-flag6"></i>' . esc_html__( 'Flag as inappropriate' ) .
</a>
<div class="modal fade modal-form" id="user-flag" tabindex="-1" role="dialog">
<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>
<h3 class="modal-title" id="flagModalLabel">
<?php echo esc_html__( 'Flag' ); ?>
</h3>
</div>
<div class="modal-body">
<form id="cs_flag_user">
<input type="hidden" name="name_one">
<input type="hidden" name="name_two">
<textarea></textarea>
</form>
</div>
</div>
</div>
</div>
It seems you may have a problem in server side, the code in your page, or any form submissions which changed may be the DOM, It will be easier to open the console and figure out exact problem.
A full demo for your code is running in Codepen here. I just replaced your php code with simple text, check it and leave your comment in case you need more help.
If you need to work with modal windows easily, I already wrote and open sourced modal windows wrapper plugin based on bootstrap4, you can find also demos and how to use here.
Try avoiding data-toggle="modal" data-target="#user-flag"
and use jquery to display and hide modals.
If notifications are loaded via ajax, then display modal inside success of that ajax.

Bootstrap Auto Close Dynamically Added Alert

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

BootStrap alerts onclick dissmiss

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

Bootstrap's Modal box - background doesn't fade out on show

I'm currently working on a C# MVC application. I'm using Twitter's Bootstrap's modal boxes as a 'popup' window. This has worked flawlessly in the past, but for some reason it doesn't right now. The result I get right now is shown below. Don't mind the blur, I did that.
Naturally the background is supposed to get grey, faded out like always, though for some reason it doesn't right now. I've basically copy pasted the code that works elsewhere and changed the values. I double and triple checked to make sure I didn't make a mistake somewhere, but I honestly can't see it.
I've pasted the relevant code below. JQuery gets loaded in the layout file. This is a partial view for the record
<button id="btnAddNewSecureFolder" onclick="openTheCreateWindow()" data-toggle="modal" data-target="#modal-new-secFolder" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone">Add a secure folder</button>
#*<button onclick="openTheCreateWindow()" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone" id="btnAddNewSecureFolder">
Add a secure folder
</button>*#
<div class="modal" id="modal-new-secFolder" tabindex="-1" role="dialog" aria-labelledby="modal-new-secFolder" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add a new secure folder</h4>
</div>
<div class="modal-body">
#Html.Partial("CreateNewSecureFolder")
</div>
</div>
</div>
</div>
<script>
function openTheCreateWindow() {
$('#modal-new-secFolder').modal('show');
}
</script>
Check in Chrome Developer Tools if
<div class="modal-backdrop fade in"></div>
exists right before closing </body> tag.
Styles for this div:
Also try to remove
aria-hidden="true"
attribute from your modal dialog.

bootstrap modal example

I am using twitter bootstrap js to implement the modal.....
I used the online example.....
Copied the html, CSS and js code into the fiddle....
but I don't see any output....
http://jsfiddle.net/nJ6Mw/
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
You're missing something to kick-off the modal. You can either add a link to open it with your modal id referenced in the data-target attribute, or set the href target to be the modal div:
<a role="button" class="btn" data-toggle="modal" data-target="#myModal">Launch demo modal</a>
You can use javascript to setup your Modal div as a modal target, and to open and close it also.
Launch demo modal
...
$('#myModal').modal(options) <-- check the bootstrap site for possible options values.
$('#myModal').modal('show')
$('#myModal').modal('hide')
To make this work, I added the id of myModal to your modal div:
<div id="myModal" class="modal hide fade">
This is all as per the Bootstrap documentation. Maybe take a closer look at it?
Here is a working fiddle from your example. I added the boostrap stuff as external resources. http://jsfiddle.net/nJ6Mw/4/
Edit:
Adding the data-dismiss="modal" attribute will make the close button work.
Close

Categories