user2714421 user2714421 - 1 month ago 14
jQuery Question

Close button for typo3 modalbox

I have found a perfect instruction for a modalbox with TYPO3 (http://www.andreas-hoffmeyer.de/blog/content-als-lightbox.html). The opening is fine for all kind of content elements but the author didn't integrate a close button and asking him for a hint wasn't successful.

I have some Typoscript

modal = PAGE
modal {
typeNum = 123
config {
no_cache = 1
disableAllHeaderCode = 1
disablePrefixComment = 1
}
10 < styles.content.get
10 {
select {
andWhere.data = GP:cid
andWhere.intval = 1
andWhere.if.isTrue.data = GP:cid
andWhere.wrap = uid=|
}
}
}


and some jquery

(function(window, document, $) {
"use strict"
$('.download').on('click', function(event) {
event.preventDefault();
// erstmal alle bisherigen Modalboxes entfernen
$('.download').remove();
var uri = [];
uri = $(this).attr('href').split('#');
if (uri[1]) {
var cid = uri[1].replace(/[a-z]/gi, '');
$.get(uri[0], {cid: cid, type: 123}, function(data, status) {
appendToBody(data, status);
});
return true;
}
$.get(uri[0], {type: 123}, function(data, status) {
appendToBody(data, status);
});
});
function appendToBody(data, status) {
if (status !== 'success') {
throw Error('Error getting the content');
}

$('<div>', {
id: 'modal',
css: {
(...)
}
}).html(data).appendTo('body');
}
})(window, document, jQuery);


Now I need a close button inside the modalbox and it would be great to have the modalbox closed by clicking somewhere outside the modal box.

I tried it this way without success:

I created a new HTML Content Element in TYPO3 on the page that is shown in the modalbox and added

<p class="close">Close Window</p>

<script>
$( '.close' ).click(function() {
$('.download').remove();
});
</script>

Answer

I've found a solution. This works fine for me:

<p class="close">Fenster schlie├čen</p>

<script>
     (function(window, document, $) {
         $( '.close' ).click(function() {
              $('#modal').remove();
         });
    })(window, document, jQuery);
</script>