I'm following the blur admin UI to display the alert after button clicked. However, the closeable alert message does not closed when I clicked on the close button.
I want to be able to close the alert message and turn scope.added = false.
Any help please?
Here is how my code looks like:
in HTML:
<div ng-show="added" class="alert bg-success closeable" role="alert">
<button type="button" class="close" aria-label="Close"><span
aria-hidden="true">×</span></button>
<strong>Added</strong> Successfully!
</div>
<div style="text-align: center">
<button type="submit" ng-click="display()"
class="btn btn-danger">add
</button>
</div>
in JS:
$scope.added = false;
$scope.display= function () {
$scope.added = true;
}
thanks
Add ng-click to your X (close) button:
<button
type="button"
class="close"
aria-label="Close"
ng-click="close()">
<span aria-hidden="true">
×
</span>
</button>
And then add the close() function to the controller:
$scope.close = function(){
$scope.added = false;
}
Related
When I doubleclick quickly, two modal windows open simultaneously and close button is blocked. You can try live demo in http://1card.digital/prb/modalprb1.html
Link to Open Modal
<a class="btn btn-primary btn-block btn-lg" data-toggle="modal" href="#myModalAgrP" id="modallinkAgrP" data-title="ModalPrb1Mdl">Open Modal</a>
JQuery to Open Modal
<script type = "text/javascript" > $(document).ready(function () {
jQuery('#modallinkAgrP').click(function (e) {
$('#myModalAgrP').modal('hide');
$('.modal-container').load($('#modallinkAgrP').data('title'), function (result) {
$('#myModalAgrP').modal({
show: true
});
});
});
});
$(document).on("hidden.bs.modal", "#myModalAgrP", function () {
$('#myModalAgrP').remove();
});
</script>
Modal Code
<div class="modal fade" id="myModalAgrP">
<div class="modal-dialog">
<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'><a target="_blank" href="#"><span class="fa fa-question-circle"></span></a> Bootstrap Modal</h4>
</div>
<div class="modal-body">
<div class="callout callout-info">Prueba de Bootstrap Modal</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
Thank's a lot for your answer, this code solve my double click problem...
$('a').on('click', function(e){
var $link = $(e.target);
e.preventDefault();
if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 900) {
console.log('clicked');
// doSomething();
}
$link.data('lockedAt', +new Date());
});
You can specify "static" for a backdrop which doesn't close the modal on click.
For example:
jQuery('#modallinkAgrP').click(function (e) {
$('.modal-container').load($('#modallinkAgrP').data('title'), function (result) {
$('#myModalAgrP').modal({
show: true,
backdrop: 'static'
});
});
});
With the following code I'm trying to validate an entry field in JavaScript. The validation requires only 10 characters. When you authenticate, it is supposed to display a modal with a confirmation message:
function myFunction() {
var con_code, text;
//getting the field
con_code = document.getElementById("con_code").value;
if ($.trim($('con_code').val()).length == 0) {
text = "Authentication code is not valid";
}
//trigger to the modal if it meets the condition
$(document).ready(function() {
$("#con_code").click(function() {
$("#myModal").modal();
});
});
document.getElementById("error_con_code").innerHTML = text;
}
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<div class="form-group">
<label>Confirmation Code.</label>
<input type="text" name="con_code" id="con_code" class="form-control" required="required" placeholder="Enter your Confirmation Code" />
<br> //the error code display
<span id="error_con_code" class="text-danger"></span>
<br> //the authenticate button
<button type="button" class="btn btn-success btn-sm" id="con_code" onclick="myFunction()">Authenticate</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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> //the modal
<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>
</div>
However, it is not authenticating the confirm code. How can I fix it?
You have an error at:
if($.trim($('con_code').val()).length ==0){...}.
It should be $('#con_code')
Also you have 2 elements with the same id="con_code".
Please check with the following codes.
I am assuming you want to show the modal when there is 10 chars in the input field. If the rule changes, then please edit at: 'if ($.trim(con_code.val()).length != 10) {}' in the below codes.
$(document).ready(function() {
myFunction();
});
function myFunction() {
$("#con_code_btn").click(function() {
var con_code = $('#con_code');
var error_con_code = $('#error_con_code');
error_con_code.html('');// Remove Previous Error Message(if any);
if ($.trim(con_code.val()).length != 10) {
error_con_code.html("entication code is not valid");
}
else {
$("#myModal").modal();
}
});
}
Also please change the id of the button to "con_code_btn" in the form:
<button type="button" class="btn btn-success btn-sm" id="con_code_btn" onclick="myFunction()">Authenticate</button>
I am attempting to use jquery to close a bootstrap modal on an angular project in typescript code.
The code:
function call in html:
(click)="populaterfpfromsaved(i, createSaved, createProp )"
createSaved and createProp are local references on modals
here they are on the modals:
<ng-template #createProp let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Request For Proposal</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
....
<ng-template class="mw-100 w-75" #createSaved let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Saved RFPs</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body table-responsive">
<table class="table table-hover">
<thead>
....
and the code in my typescript
populaterfpfromsaved(index, create, prop){
console.log('it fired to open the rfp modal');
const scoperfp = this.savedrfps[index];
this.savedevent.name = scoperfp.eventname;
this.savedevent.date = scoperfp.datename;
this.savedevent.programdate = scoperfp.datevalue;
this.savedevent.dateflex = scoperfp.dateflex;
this.savedevent.eventpurpose = scoperfp.eventpurpose;
this.savedevent.starttime = scoperfp.startime;
this.savedevent.starttimeflex = scoperfp.starttimeflex;
this.savedevent.endtime = scoperfp.endtime;
this.savedevent.endtimeflex = scoperfp.endtimeflex;
this.savedevent.headcount = scoperfp.headcount;
this.savedevent.eventdetails = scoperfp.eventdetails;
(<any>jQuery(create)).modal('hide');
(<any>jQuery(prop)).modal('show');
}
but the modals do not change.
Is there something I haven't set up right
Change like this it may be work for you let try this once.
change your html file,
<ng-template #createProp let-c="close" let-d="dismiss">
to <div class="modal" id='createProp'></div>
typescript file,
$('#createProp').modal('toggle');
use this above line for wherever you want to close your modal.
Make sure you have included jquery plugin in your app and declared variable
declare var $: any;
angular.cli.json
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
For more reference,
Close Bootstrap Modal
https://medium.com/#swarnakishore/how-to-include-and-use-jquery-in-angular-cli-project-592e0fe63176
I'm creating a ASP.NET Webpage using Bootstrap and jQuery.
I have recently implemented a modal to show a log. The modal is shown when clicking a link:
<a data-toggle="modal" data-target="#logData">Open</a>
<div class="modal fade" id="logData" tabindex="-1" role="dialog" aria-labelledby="logDataLabel">
<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" id="myModalLabel">Log for #Html.DisplayFor(model => model.Alias)</h4>
</div>
<div class="modal-body">
<textarea class="form-control log" rows="5" placeholder="Log is empty.">#Html.DisplayFor(model => model.Log)</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The modal contains a textarea that doesn't autoresize.
I have found the following code:
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
which should enable my textareas to autoresize and it works other places in my code, but not in this modal above. At least not when typing in the textarea, but upon opening the modal it does seem to autoresize.
Does anyone have an idea of why? And eventually on how to fix it?
Thanks!
You can use this code which will work if the textarea is not hidden (e.g in a modal that is not shown yet)
let setHeight = (input) => {
input.style.overflow = 'hidden';
input.style.height = 0;
input.style.height = `${ input.scrollHeight + 2 }px`;
};
$('textarea').on('input, keyup', function () {
setHeight(this);
})
for bootstrap modal, u can do something like this:
$('.modal').on('shown.bs.modal', function () {
$(this).find('textarea').each(function () {
setHeight(this);
});
})
I am using bootstrap to invoke a simple modal form which contains only a textarea field and couple of buttons. I am setting some custom text (variable length) in the textarea while invoking the modal form. What I want is to focus on the textarea field after the custom text so the user can start typing after that. I have mentioned my implemenation of this below. Can anyone tell how to achieve this?
Here is the Fiddle: http://jsfiddle.net/jLymtdg8/
A bit explanation here as well -
Here is my modal (all bootstrap stuff)-
<div class="modal fade" id="msg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Type a message</h4>
</div>
<div class="modal-body">
<textarea id="Message" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
<button id="PostModalButton" class="btn btn-primary btn-sm">Post</button>
</div>
</div>
</div>
And here is how it gets invoked -
<div class="pull-right">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#msg" data-screenname="Type after this">
Post A Message
</button>
</div>
This is how I am prefilling the textarea and setting focus, but this is only setting cursor on first line rather than after screen_name -
$(this).on('shown.bs.modal', '#msg', setFieldAndFocus)
var setFieldAndFocus = function () {
var screen_name = $("button[data-target='#msg']").data("screenname");
$("#Message").val(screen_name + " ");
$("#Message").focus();
};
Sam you can try the following javascript code:-
var screen_name = '',
old_message = '',
new_message = '';
$("#msg").on('shown', function() {
screen_name = $("button[data-target='#msg']").data("screenname"),
old_message = $.trim($('#Message').val()),
new_message = ( old_message.length == 0 ) ? screen_name : old_message;
$("#Message").focus().val(new_message + " ");
});
Let me explain why i have used this code. From the js fiddle link that you have provided what i understand is you are using the bootstrap 2 version, but the code that you are using
$("#msg").on('shown.bs.modal', function(){
...
}
was introduced only in bootstrap 3. so I have changed it to
$("#msg").on('shown', function(){
...
}
and the line
$("#Message").focus().val(new_message + " ");
is used so that you can set the focus after the custom text.I hope this will resolve your issue.
You can take reference of this link : http://jsfiddle.net/3kgbG/433/
It is working for me.
$('.launchConfirm').on('click', function (e) {
$('#confirm')
.modal({ backdrop: 'static', keyboard: false })
.on('')
.one('click', '[data-value]', function (e) {
if($(this).data('value')) {
//alert('confirmed');
} else {
//alert('canceled');
}
});
});
$('#confirm').on('shown', function () {
$('#txtDemo').val($('#txtDemo').val());
$('#txtDemo').focus();
// do something…
})
body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
overflow-y: scroll;
}
#media (max-width: 979px) {
.modal-open .page-container .navbar-fixed-top{
overflow-y: visible;
}
}
<div class="page-container">
<div class="container">
<br />
<button class="btn launchConfirm">Launch Confirm</button>
</div>
</div>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Do you want to continue?
<input id="txtDemo" type="text" value="Jayesh" class="form-control"/>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
<button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
</div>
</div>