2

私は、AlloyUI モーダルの「実世界の例」を Web サイト ( http://alloyui.com/examples/modal/real-world/ ) から直接使用しています。

例をそのまま使用し、次の行を次のように変更します。

   visible: true,

に

   visible: false,

ダイアログボックスが期待するように、ページが読み込まれたときではなく、ボタンをクリックした後にのみモーダルが表示されるようにします。ボタンをクリックして「モーダルを表示」すると、モーダルがロードされますが、ダイアログの本文がスペースを適切に埋めず、ツールバーがマッシュアップされます。サイズを変更すると、すべてが適切に元の位置に戻ります。

私はクリーンな修正を探しています。これまでのところ、ハッキーな修正は、モーダルをページ本文の背後に配置する zIndex でロードし、ボタンをクリックして CSS を介して z-index を変更することである可能性があると考えています (しかし、これは本当にハック）。ボタンが modal.show() を起動した後、おそらくプログラムでモーダルのサイズを変更することもできますが、それにより、回避したいレイアウトに目に見えるジャンプが発生します。

助言がありますか？AlloyUI にはたくさんの隠し機能があることは知っています。ドキュメントがまばらなので、visible 属性を使用する必要はないのではないでしょうか?

4

2 に答える 2

3

いくつかの調査の後、私は自分自身の質問に対する答えを見つけました。

 Step 1: 
 Leave visible: true intact.

 Step 2: 
 Invoke .hide() after setting up the modal

完全なコード。

YUI().use('aui-modal', function(Y) {
    var modal = new Y.Modal({
        bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
        centered: true,
        headerContent: '<h3>Modal Goodness</h3>',
        height: 600,
        modal: true,
        render: '#modal',
        width: 900
    }).render();

    modal.addToolbar([
        {
          label: 'Save',
          on: {
            click: function() {
              alert('You clicked save!');
            }
          }
        },
        {
          label: 'Close',
          on: {
            click: function() {
              modal.hide();
            }
          }
        }
    ]);

    modal.hide();

    Y.one('#showModal').on(
        'click',
        function() {
            modal.show();
        }
    );
});
于 2013-10-10T16:19:45.457 に答える