Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to open a modal in Drupal 8 without using a link?

The modal isn't triggered by a link on the page which the user has clicked. The modal is triggered when the user arrives on the url.

Think of something like a disclaimer that pops up as soon as the user arrives on the url.

like image 524
esod Avatar asked Dec 01 '15 16:12

esod


People also ask

How do I open a modal when I click a button?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

How do I open a link in a modal window?

Open Link in a Popup Window In order to open them in a new window, we add target="_blank" attribute to links. However to open the links in a separate popup window, we can make use of the onclick property and specifying a inline JavaScript code window.

What is modal in Drupal?

A useful utility module that Interactive Knowledge has developed and maintains is the Modal Management Module. This module allows content administrators to easily manage pop-up modal windows on a Drupal 8 or 9 website. The basic concept is the module defines modals as a custom entity.


1 Answers

You can use the Drupal.dialog function for this.

For example:

var $myDialog = $('<div>My dialog text</div>').appendTo('body');
Drupal.dialog($myDialog, {
  title: 'A title',
  buttons: [{
    text: 'Close',
    click: function() {
      $(this).dialog('close');
    }
  }]
}).showModal();

See node.preview.js for another example.

Update: To use this with an AJAX request/response:

Drupal.ajax({
  url: 'some/path',
  success: function(response) {
    var $myDialog = $('<div>' + response.data + '</div>').appendTo('body');
    Drupal.dialog($myDialog, {title: 'Some title'}).showModal();
  }
}).execute();
like image 184
jhedstrom Avatar answered Oct 24 '22 16:10

jhedstrom