Joomla JHtml Behavior.Modal应用于滑动侧栏

Question

I am caught with a problem that a modal popup link that is inside a sliding side bar is not working correctly to open a modal pop up box. The sliding sidebar will only open when a user click on it, and in it there will be contents that contain the modal links.

I have added

Jhtml::_('behavior.modal');

At the beginning of the codes but still doesn't work. My link code is as follows

<a class="modal" rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="index.php">Click me</a>

Based on this link, it should open the content in a modal popup box in normal case (on the main page and not in the sliding sidebar). However when it is in the sliding sidebar it doesn't work.

The main reason I think of could be because the sliding sidebar is dynamically created after the site has been loaded, so the link will not behave as a modal link but just an ordinary href link.

I have seen a reply online here suggesting to execute this

SqueezeBox.assign($$('a.modal'), {
parse: 'rel'
});

every time you add a new element. But I do not know what it means and how to execute it.

Does anyone here have a solution to make the sliding sidebar modal link work?

Answer 1

Finally, i found the answer myself. For anyone who may encounter this problem with ajax or dynamic content just add the following to your loading page javascript

$('body').on('click', 'a.osmodal', function(event) {
event.preventDefault();
SqueezeBox.open($(this).attr('href'), {
handler: 'iframe',
size: {x: 900, y: 500}
});
});

This is just a simple contribution, hope someone will find it helpful.

Answer 2

Wanted to answer your question regarding the proper means to assign Joomla's core modal behavior to dynamically generated content, because you were so close. At work we generate a lot of content using AJAX/lazy loading.

There are two parameters for assign method. The first indicates which DOM elements to apply, and below I include examples for both assigning by class or id. The second is JSON object options, which 9 times out of 10 will already be attached to the rel attribute of your anchor element.

A final caveat being this method must be run after dynamically generated HTML is inserted into the DOM.

Using Class

SqueezeBox.assign(
    $$('a.modal.unique-class-identifier'),
    $('a.modal.unique-class-identifier').attr('rel')
});

Using ID

SqueezeBox.assign(
   'a.modal#unique-id-identifier',
    $('a.modal.unique-class-identifier').attr('rel')
});

Hope that helps.

Answer 3

Had the same issue, I dynamically added some links in a Joomla page after the page was already loaded. The following snipped added the event handler for the modal dialog on the newly added elements (make sure it's called after the elements were added):

<script>
SqueezeBox.assign(jQuery('a.modal'), {
parse: 'rel'
});
</script>

Also make sure, you have the modal functionality loaded in (eg) your template:

JHTML::_('behavior.modal');