StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>I write the answer here, because the comments are not good to display code</p> </blockquote> <p>Joomla modal functionality is good to show a link from a component but does not allow us to open a given element on the page. Therefor you need to write your own code, first of all do not override Joomla's core or all the modifications you make will be overriden the next time you upgrade. So assuming that you take this into account:</p> <p>1- First thing to do, add the javascript code for your custom modal window. You will need to pass the text container div id or classname to the following code:</p> <pre><code><script type="text/javascript"> $(document).ready(function(){ // Main parameters: // Modify texteditor-id with the id or classname on your text div. For a classname use '.' instead of '#' var HTMLContent = $("#texteditor-id").html(); var width = 600; var height = 250; $('#button').click(function(){ // transparent background // we create a new div, with two attributes var bgdiv = $('<div>').attr({ className: 'bgtransparent', id: 'bgtransparent' }); // add the new div to the page $('body').append(bgdiv); // get the widht and height of the main window var wscr = $(window).width(); var hscr = $(window).height(); // set the background dimensions $('#bgtransparent').css("width", wscr); $('#bgtransparent').css("height", hscr); // modal window // create other div for the modal window and two attributes var moddiv = $('<div>').attr({ className: 'bgmodal', id: 'bgmodal' }); // add div to the page $('body').append(moddiv); // add HTML content to the modal window $('#bgmodal').append(HTMLContent); // resize for center adjustment $(window).resize(); }); $(window).resize(function(){ // explorer window dimensions var wscr = $(window).width(); var hscr = $(window).height(); // setting background dimensions $('#bgtransparent').css("width", wscr); $('#bgtransparent').css("height", hscr); // setting modal window size $('#bgmodal').css("width", ancho+'px'); $('#bgmodal').css("height", alto+'px'); // getting modal window size var wcnt = $('#bgmodal').width(); var hcnt = $('#bgmodal').height(); // get central position var mleft = ( wscr - wcnt ) / 2; var mtop = ( hscr - hcnt ) / 2; // setting modal window centered $('#bgmodal').css("left", mleft+'px'); $('#bgmodal').css("top", mtop+'px'); }); }); function closeModal(){ // remove created divs $('#bgmodal').remove(); $('#bgtransparent').remove(); } </script> </code></pre> <p>2- Your preview link must look something like this, the most important part is the id="button" part because it will be used to be identified by the previous jquery code:</p> <pre><code><input type="button" id="button" value="Preview" /> </code></pre> <p>3- Add the following code to your css</p> <pre><code>.bgtransparent{ position:fixed; left:0; top:0; background-color:#000; opacity:0.6; filter:alpha(opacity=60); } .bgmodal{ position:fixed; font-family:arial; font-size:1em; border:0.05em solid black; overflow:auto; background-color:#fff; } </code></pre> <p>And that is basically what you need to do. Hope that helps!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload