<dialog> with JQueryUI draggable

So I have an issue where I want to combine the <dialog> with JqueryUI draggable.

The issue comes from the fact that the has margin: auto that makes it be nice and centered, and I want to have that (starting) position.

Issues with margin:

The main dialog does not respond to dragging as you would expect due to it having basically width and height 100%
I also want to make it draggable with containment in the body, but due to the above margins this means I cannot move it

I can fix the issues above by doing margin: 0 but this breaks the positioning of the dialog and it starts from 0, 0.

Has anyone tried to combine these two before in a way that keeps the wanted starting positioning and the expected draggability?

Draggable with margin auto

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>


<script>

function drag() {
    $("#showcase").draggable();
}

</script>


<button type="button" onclick="document.getElementById('showcase').showModal();drag();">Click me</button>

<dialog id="showcase">
hello world
<button type="submit" onclick="document.getElementById('showcase').close();">Close</button>
</dialog>

Draggable with margin 0

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>


<script>

function drag() {
    $("#showcase").draggable();
}

</script>


<button type="button" onclick="document.getElementById('showcase').showModal();drag();">Click me</button>

<dialog id="showcase" style="margin:0;">
hello world
<button type="submit" onclick="document.getElementById('showcase').close();">Close</button>
</dialog>

Solution

Centering the modal using the "usual" technique of positioning at top/left 50%, and then offsetting by the element dimensions using transform: translate(-50%, -50%) did almost work - but that always makes the element jump a little bit, so that it is centered regarding the mouse cursor position.

I think your best bet is probably to calculate the proper coordinates to position the dialog absolute, with fixed pixel values:

$('#trigger').on('click', function() {
   let $showcase = $('#showcase');
   $showcase.css({
      margin: 0,
      position: 'absolute',
      top: window.innerHeight / 2 - $showcase.height() / 2,
      left: window.innerWidth / 2 - $showcase.width() / 2,
   });
   $showcase[0].showModal();
   $("#showcase").draggable();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<button type="button" id="trigger">Click me</button>

<dialog id="showcase">
hello world
<button type="submit" onclick="document.getElementById('showcase').close();">Close</button>
</dialog>