I'm working on a page that will have a couple links on it that need to show another page in a modal popup.

I've used class="use-ajax" to accomplish this in the past. However, I'm making modifications to this page via JS and these links will not load with that class.

I've used the following which opens the page in a modal as expected:

var $myDialog = $('<iframe src="https://www.mysite.com/page/in/modal"></iframe>').appendTo('body');
  Drupal.dialog($myDialog, {
    title: 'Title',
    buttons: [{
      text: 'Close',
      click: function() {

However, this renders the entire page. How can I load just the content area of this page similar to how class="use-ajax" data-dialog-options="..." data-dialog-type="..." work?

Thank you!

Edit First I tried just dynamically adding the attributes needed for opening a page in a modal but I also couldn't get this to work:

    'class': 'use-ajax', 
    'data-dialog-options': '{&quot;width&quot;:550, &quot;dialogClass&quot;: &quot;my-dialog&quot; }',
    'data-dialog-type': 'modal'
  • Why would you iframe your own site within a modal? You mean another website entirely right? In any case... drupal.org/docs/drupal-apis/ajax-api/ajax-dialog-boxes – Kevin Jan 13 at 22:31
  • @Kevin Thanks! The AJAX Links section of that documentation is exactly what I'm hoping to accomplish. I originally tried this by adding those attributes to the links and binding them but couldn't get this to work. I've updated my original question with those details, too. – Vecta Jan 13 at 22:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.