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>

出于某种原因，我无法将其附加到＆＃34;界面＆＃34; div，我已经使用了失败的appendTo jquery，接口div为600x200，目前atm模态对话框后面有覆盖，覆盖整个身体，我喜欢它专门覆盖界面格。

CSS是非常基本的，一个绿色的对话框，上面有一些文字，后面有一个叠加。

Answer 1

这是FIDDLE，至少部分解决了您的问题。

如果你将一个.dialog附加到一个元素上，它往往会变成＆＃34;或＆＃34;掩盖＆＃34;那个元素。

所以在上面的小提琴中，我将.dialog附加到一个较小的div中，该div没有显示在较大的div中，只需单击较大的div即可打开对话框。

如果你看一下.dialog的jQuery文档，你会发现模态的目的是阻止页面上每个可能的交互，迫使用户只与模态交互。因此，当您使用模态时，整个页面/正文/窗口将显示为灰色。

我想你可以编写自己的模态，然后将灰色显示为灰色。

你真的需要让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');
});

如何将模态对话框附加到div？

1 个答案: