Forum GLPI-Project

lexcorp

Member

Registered: 2014-09-17

Posts: 64

Create Popup or Modal Window

Hello, I added to the simplified interface form some html elements called "hotspots", with the aim of being able to guide users in the process of creating the ticket.

Here is an example of what I want to do:

http://www.jqueryscript.net/other/Image … alize.html

I have successfully added "hotspots" that really are buttons.

I am trying to click on one of the hotspots to display a window with information that allows the user to know the details to raise a ticket.

http://www.jqueryscript.net/demo/Image- … n-Scalize/

I've reviewed the classes ajax.class.php, html.class.php, where I've noticed that there are some functions that make calls to display popup windows and manners.

However I do not work a new window that I created, I only work those that already exist in glpi. for example shows me the menu window:

helpdesk.public.php?create_ticket=1:290 Uncaught ReferenceError: displayPopup is not defined
    at HTMLButtonElement.onclick (helpdesk.public.php?create_ticket=1:290)

<button type="button" class="buttonx" id="buttonx" onclick="$('#show_all_menu').dialog('open')" ;="">?</button>

<a href="#" onclick="$('#show_all_menu').dialog('open');" id="menu_all_button" class="button-icon"></a>

<script type="text/javascript">
//<![CDATA[

$( document ).ready(function() {
$('#show_all_menu').dialog({
         height: 'auto',
         width: 'auto',
         modal: true,
         autoOpen: false
         });
});

//]]>
</script>

Last edited by lexcorp (2017-09-25 04:53:04)

lexcorp

Member

Registered: 2014-09-17

Posts: 64

Re: Create Popup or Modal Window

Anyone

lexcorp

Member

Registered: 2014-09-17

Posts: 64

Re: Create Popup or Modal Window

I have analyzed some classes

Load Bookmarks in html.class.php

<script type="text/javascript">
            $('#loadbookmark').dialog({
               modal: true,
               autoOpen: false,
               height: 500,
               width: 1050,
               draggable: true,
               resizeable: true,
               open: function(ev, ui){
               $('#Iframeloadbookmark').attr('src','/glpi914/front/bookmark.php?action=load&_in_modal=1');},close: function(ev, ui) { window.location.reload() },title: "Cargar un marcador"});
</script>


<a href="#" onclick="$('#loadbookmark').dialog('open');"><span id="bookmark_icon" title="Cargar un marcador" alt="Cargar un marcador" class="button-icon"></span></a>



Ajax::createIframeModalWindow('loadbookmark',
                                    $CFG_GLPI["root_doc"]."/front/bookmark.php?action=load",
                                    array('title'         => __('Load a bookmark'),
                                          'reloadonclose' => true));
echo "<a href='#' onClick=\"".Html::jsGetElementbyID('loadbookmark').".dialog('open');\">";

Show menu in html.class.php

<script type="text/javascript">
//<![CDATA[

$( document ).ready(function() {
$('#show_all_menu').dialog({
         height: 'auto',
         width: 'auto',
         modal: true,
         autoOpen: false
         });
});

//]]>
</script>

<a href="#" onclick="$('#show_all_menu').dialog('open');" id="menu_all_button" class="button-icon"></a>

Add dropdown in Knowledge Base

<img alt="" title="Añadir" src="/glpi914/pics/add_dropdown.png" style="cursor:pointer; margin-left:2px;" onclick="$('#add_dropdown1843132794').dialog('open');">

<script type="text/javascript">
            $('#add_dropdown1843132794').dialog({
               modal: true,
               autoOpen: false,
               height: 500,
               width: 1050,
               draggable: true,
               resizeable: true,
               open: function(ev, ui){
               $('#Iframeadd_dropdown1843132794').attr('src','/glpi914/front/knowbaseitemcategory.form.php?_in_modal=1');},title: ""});
</script>

In ajax.class.php exist 3 functions:

static function createModalWindow($name, $url, $options=array() ) { ... }

static function createFixedModalWindow($name, $options=array() ) { ... }

static function createIframeModalWindow($domid, $url, $options=array() ) { ... }

Could you share an example?

lexcorp

Member

Registered: 2014-09-17

Posts: 64

Re: Create Popup or Modal Window

Anyone?

lexcorp

Member

Registered: 2014-09-17

Posts: 64

Re: Create Popup or Modal Window

A little help here please!..

fralla2

Member

Registered: 2018-03-28

Posts: 9

Re: Create Popup or Modal Window

4 Years later but since I had to do about the same thing... here's how I've done it (inspired from plugins formcreator) :

1 : Create a file in yourPlugins/ajax directory (it will contains what you want to display inside the modal window). 
* I personally named the file myPlugins/ajax/myPlugins.php

2 : Create a file in yourPlugins/js directory (it will contains the javascript code that will serve to create the modal window).
* I've named the file myPlugins/js/scripts.js.php and it contains the following (need some adaptation for your needs)

<?php
include ('../../../inc/includes.php');
header('Content-Type: text/javascript');
?>
"use strict";

var modalWindow;
var rootDoc          = CFG_GLPI['root_doc'];
var myPluginsRootDoc = rootDoc + '/' + GLPI_PLUGINS_PATH.myPlugins;

$(function() {
   modalWindow = $("<div></div>").dialog({
      width: 400,
      autoOpen: false,
      height: "300",
      modal: true,
      position: {my: 'center'},
      open: function( event, ui ) {
         //remove existing tinymce when reopen modal (without this, tinymce don't load on 2nd opening of dialog)
         modalWindow.find('.mce-container').remove();
      }
   });
});

var plugin_myPlugins = new function() {
   this.spinner = '<div"><img src="../../../pics/spinner.48.gif" style="margin-left: auto; margin-right: auto; display: block;" width="48px"></div>'

   this.modalSetings = {
      autoOpen: false,
      height: '300px',
      minHeight: '300px',
      width: '400px',
      minWidth: '400px',
      modal: true,
      position: {my: 'center'},
      close: function() {
         $(this).dialog('close');
         $(this).remove();
      }
   }

   this.plugin_myPlugins_scrollToModal = function (modalWindow) {
      $('html, body').animate({
         scrollTop: $(modalWindow).closest('.ui-dialog').offset().top
      }, 300);
   }

   this.showLabel = function (name, inventoryNumber, bgColor) {
      modalWindow.load(
        myPluginsRootDoc + '/ajax/myPlugins.php', {
           name: name,
           inventoryNumber : inventoryNumber,
           bgColor : bgColor
        }
      ).dialog('open');
      // this.plugin_myPlugins_scrollToModal($(modalWindow));
   }

}

3 : in the file yourPlugins/setup.php, you need to add a hook for your javascript file inside the function plugin_init_yourPlugins()

$PLUGIN_HOOKS['add_javascript']['myPlugins'][] = 'js/scripts.js.php';

4 : You need to call this javascript function from somewhere to have the modal window displayed... I personally used in a html link :

<a href="javascript:plugin_csscvinventorylabels.showLabel('name','invNumber','#FFFFFF');">Imprimer l'étiquette d'inventaire</a>

Hope this helps
Francois