Dashboards & Visualizations

How to make a Draggable Modal Context Pop-Up?

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() {

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

Any suggestions? (@niketnilay)

Labels (1)
0 Karma


@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


Or following shared contribution available within Splunk for jQuery UI 1.10.4





2) The Table Click Event Handler which sets the CSS for Modal view to display it, should also be changed to add 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.



 ], 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.
         //Adjust position when clicking extreme right side of the table. Modal window has width 400.
             top: top,
             left: left


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


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

For example, including this seems to work fine


but including other widgets seems to throw an error



0 Karma
Get Updates on the Splunk Community!

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...