We Keep Coding

Open popup-modal when function gets called Javascript

I have a function that detects the users keyboard, and when the user writes the combination of 4 2 0 on his keyboard, I'm trying to have a popup-modal open up.
<script type="text/javascript" src="main.js"></script>
<script language="javascript">
easteregg();
</script>
<div id="myModal" class="modaljs">
<div class="modal-contentjs">
<span class="close">×</span>
<p>You made it!</p>
</div>
</div>
function easteregg() {
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
let sequence = '';
window.addEventListener('keyup', function(event) {
sequence = `${sequence}${event.key}`.substr(-3);
if (sequence === '420')
this.modal("show");
})
};
I understand that the
this.modal("show");
is wrong, but I dont know what to put in there.

You can use Bootstrap and Vanilla.js to do it.
Bootstrap 5 no longer needs jQuery as a dependency since JavaScript can provide the same functionality.
e. g.
const _tmp = [];
const _modal = document.getElementById('exampleModal');
const openModal = () => {
_modal.style.display = 'block';
_modal.classList.add('show');
}
window.addEventListener('keyup', (e) => {
const charCode = (e.which) ? e.which : e.keyCode;
_tmp.push(String.fromCharCode(charCode));
if (_tmp.length > 3) _tmp.shift();
if (_tmp.join('') === '420') openModal();
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="nofollow" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
You made it!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Doubleclick block Bootstrap Modal Window

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'
});
});
});

jquery ajax post after close

I have data-id and I want to post data-id after my modal hide/close how can I do that ?
$(function() {
var popup = $('#AniPopup');
var time = $(".will-close strong");
var closeSeconds = $("#AniPopup").attr("data-close");
var openSeconds = $("#AniPopup").attr("data-open");
var dataSrc = $("#AniPopup").attr("data-src");
var dataId = $("#AniPopup").attr("data-id");
setTimeout(function(e) {
popup.modal('show');
time.html(closeSeconds);
setInterval(function(){
time.html(closeSeconds);
closeSeconds--;
if(closeSeconds < 0){
popup.modal('hide');
}
}, 1000)
}, openSeconds * 1000);
$.ajax({
url: dataSrc,
dataType: "html",
success: function(data) {
$(".modal-body").html(data);
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="AniPopup" tabindex="-1" role="dialog" aria-labelledby="AniPopupLabel" aria-hidden="true" data-close="10" data-open="2" data-src="http://www.anitur.com.tr/popup/test-6-text" data-id="69">
<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" id="memberModalLabel">Popup Header</h4>
</div>
<div class="modal-body">
this content loaded by ajax
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Kapat</button>
<span class="will-close">will be closed after : <strong>n</strong> seconds</span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Use standard event hidden.bs.modal of bootstrap modal:
$("#AniPopup").on('hidden.bs.modal', function () {
// do your staff here
});

auto resizing textarea in a modal

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);
});
})

Why my click event is attaching many times in modal button inside backbone view

In back bone view i am i am rendering template which is having bootstrap modal. My backbone view having a event for bootstrap modal window, First time when i open bootstrap window its working fine. Next time if i open bootstrap modal window that event attaching many times.
Template:
<script id="adUser-template" type="template/underscore">
<div class="modal fade" id="adUserModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Active Directory Search</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id='btnSearchUser' class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
View:
var ADSearchView = Backbone.View.extend({
el: 'form',
template: _.template($('#adUser-template').html()),
initialize: function () {
this.render();
},
render: function () {
var renderedTemplate = this.template({});
this.$el.append(renderedTemplate);
$('#adUserModal').modal('show');
},
events: {
'click #btnSearchUser': function (e) {
e.preventDefault();
this.adSearch();
}
},
adSearch: function () {
//below used to detach the click event once function called
$('#adUserModal').on('hidden.bs.modal', function (event) {
$(this).find('#btnSearchUser').off('click');
});
},
});