How to append modal dialog to div?

Question

I've designed a modal dialog that opens on the click of a button, here is the javascript and html for it;

JAVASCRIPT

 var ModalEffects = (function() {

function init() {

    var overlay = document.querySelector( '.md-overlay' );

    [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {

        var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
            close = modal.querySelector( '.md-close' );

        function removeModal( hasPerspective ) {
            classie.remove( modal, 'md-show' );

            if( hasPerspective ) {
                classie.remove( document.documentElement, 'md-perspective' );
            }
        }

        function removeModalHandler() {
            removeModal( classie.has( el, 'md-setperspective' ) ); 
        }

        el.addEventListener( 'click', function( ev ) {
            classie.add( modal, 'md-show' );
            overlay.removeEventListener( 'click', removeModalHandler );
            overlay.addEventListener( 'click', removeModalHandler );

            if( classie.has( el, 'md-setperspective' ) ) {
                setTimeout( function() {
                    classie.add( document.documentElement, 'md-perspective' );
                }, 25 );
            }
        });

        close.addEventListener( 'click', function( ev ) {
            ev.stopPropagation();
            removeModalHandler();
        });

    } );

}

init();

})();

HTML

<div class="md-modal md-effect-16" id="modal-16">
        <div class="md-content">
            <h3>Remember Rules</h3>
            <div>
                <p>There are certain rules you must obey, if you don't your account will be banned:</p>
                <ul>
                    <li><strong>Swearing:</strong> cursing or any other form of cursing is not allowed.</li>
                    <li><strong>Hacking:</strong> trying to hack any component of the application is a t.o.u violation.</li>
                    <li><strong>Heckling:</strong> constantly calling a moderator will kick you off the server.</li>
                </ul>
                <button class="md-close">Close me!</button>
            </div>
        </div>
    </div>

   <div id="interface">
       <textarea name="para" placeholder="type your paragraph here"></textarea>
      </div>

<center><button class="md-trigger" data-modal="modal-16">Blur</button></center>

For some reason I can't get it to append to the "interface" div, I've used the appendTo jquery which failed me, the interface div is 600x200, currently atm the modal dialog which has an overlay behind it, covers the entire body and I'd like it to specifically cover the interface div.

The CSS is very basic, a green dialog box with some text on it and an overlay behind it.

Answer 1

Here is a FIDDLE that at least partially addresses your question.

If you attach a .dialog to an element it tends to "become" or "coverup" that element.

So in the fiddle above, I've attached the .dialog to a smaller div that is not displayed within the larger div, and opened the dialog with a click on the larger div.

If you look at the jQuery documentation for .dialog, you'll see that the purpose of the modal is to block out every potential interaction on the page, forcing the user to interact with the modal only. So when you use the modal, the entire page/body/window with be grayed-out.

I suppose you could write your own modal and just gray-out the large div.

Do you really need to just gray-out the div?

edit: or you could add appendTo: '.bigdiv'

JS

var $dialogpopup = $( ".littlediv" ).dialog({
                  autoOpen: false,
                  width: 150,
                  height: 150,
                  modal: true,
                  position: {
                             my:'top center',
                             at: 'top center',
                             of: '.bigdiv'
                             }

                                          });

$('.bigdiv').on('click', function(){
      $dialogpopup.dialog('open');
});