Dashboards & Visualizations

How to make a Draggable Modal Context Pop-Up?

scoughlin1
Path Finder

I followed this example https://answers.splunk.com/answers/699512/drilldown-submenu.html

I would also like to make the modal box draggable. I tried adding :

$(document).ready(function() {
    $("#modalTableDrilldown").draggable().resizable();
});

However, I cannot drag the modal pop-up, or resize it.

Any suggestions? (@niketnilay)

Labels (1)
0 Karma

niketn
Legend

@scoughlin1 I was able to add draggable(), but resizable() did not play well. So if draggable alone will suffice the need then please try the following two changes to my previous answer.

1) Add reference to jQueryUI as draggable() event is available with jQueryUI not just jQuery library. You can use node to get jQuery reference and then use the same in your code. For simplicity I used following CDN URL for latest jQuery component

 'https://code.jquery.com/ui/1.12.1/jquery-ui.js',

Or following shared contribution available within Splunk for jQuery UI 1.10.4

 

 

'jquery.ui.draggable'

 

2) The Table Click Event Handler which sets the CSS for Modal view to display it, should also be changed to add draggable()

     $("#modalTableDrilldown").css({

 

'jquery.ui.draggable'

 

top: top, left: left }).draggable(); 

Following is the updated Javascript table_with_modal_drilldown.js. Please try and confirm whether you are able to drag the modal popup or not.

 

 

require([
     'jquery',
     'underscore',
     'splunkjs/mvc',
     'jquery.ui.draggable',
     'splunkjs/mvc/simplexml/ready!'
 ], function ($, _, mvc) {
     defaultTokenModel = mvc.Components.get("default");
     console.log("Inside Modal JS");
     $("#modalTableDrilldown").draggable(console.log("Added Dragging")).resizable(console.log("Added Dragging"));
     // All anchor tags close the Modal Pop Up
     $(document).on("click","#modalTableDrilldown a", function () {
         defaultTokenModel.set("tokHideShow", "hide fade");
     });
     // On click of table cell get Table Width and adjust Modal PopUp size
     $(document).on("click","#tableWithModalPopuUp table tbody tr td", function(e){
         // viewWidth stores Table Width
         var viewWidth=e.view.innerWidth;
         // Show modal pop-up a bit below the current cell.
         var top = e.pageY+10;
         var left = e.pageX;
         //Adjust position when clicking extreme left side of the table. Modal window has width 400.
         if(left<400){
             left=left+400;
         }
         //Adjust position when clicking extreme right side of the table. Modal window has width 400.
         if(left+200>viewWidth){
             left=viewWidth-200;
         }
         $("#modalTableDrilldown").css({
             top: top,
             left: left
         }).draggable();
     });
 });

 

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

aa70627
Communicator

@niketn , how do you determine which widget is available as part of the shared contribution? 

For example, including this seems to work fine

'jquery.ui.draggable' 

but including other widgets seems to throw an error

'jquery.ui.slider'

 

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...