如何将模式对话框添加到div？

Question

我设计了一个模式对话框，单击按钮即可打开，这是它的javascript和html；

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>

由于某种原因，我无法将其追加到“接口” div上，我使用了appendTo jquery失败了，接口div是600x200，当前在atm模态对话框的后面覆盖了一层，覆盖了整个主体，我希望它专门涵盖接口div。

CSS非常基本，一个绿色对话框，上面带有一些文本，并在其后面有一个覆盖层。

Answer 1

这是一个至少部分解决您的问题的字段 。

如果将.dialog附加到元素，则它倾向于“成为”或“覆盖”该元素。

因此，在上面的小提琴中，我将.dialog附加到了一个较小的div（未显示在较大的div中），然后单击较大的div打开了对话框。

如果查看.dialog的jQuery文档，您会发现模态的目的是阻止页面上所有可能的交互，迫使用户仅与模态交互。 因此，当您使用模态时，整个页面/正文/窗口都会变灰。

我想您可以编写自己的模式并仅将大div涂灰。

您是否真的需要使div变灰？

编辑：或者您可以添加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');
});