0

私はJSFiddleで次のことを試しました:

HTML:

<div id="dialog" title="Basic dialog">
  <p>Hello.</p>
</div>

<a href="www.google.com">Link</a>

JavaScript

$(document).ready(function() {
    $( "#dialog" ).dialog({ autoOpen: false }); 
    $(document.body).on('click',"a",function(event){ 
        if ($(this).hasClass('ui-dialog-titlebar-close')) return;
        event.preventDefault();        
        $("#dialog").dialog('open');
    });  
});

これと同じ機能を実現したいのですが、JavaScript を介してダイアログを作成します。<div id="dialog" ...>つまり、HTML にを含めたくありません。どうやってやるの？

4

2 に答える 2

3

ダイアログを表示するだけでなく、クリックでダイアログを作成できます。jsfiddleの例を次に示します。

基本的に、DOM ノードを作成し、そこからダイアログを直接適用します。$(HTML HERE).dialog()それがメソッドでできることです。

于 2013-09-08T00:56:10.007 に答える
1

このjsFiddleのように、独自のカスタム HTML を静的に追加し、それを要素またはその他の.append()に追加できます。bodydiv

自分で配置してスタイルを設定する必要があります (適切な CSS クラスを指定するか、style属性を使用して)。ブラウザーの開発者ツールを使用して、jQuery-UI ダイアログdivを覗き、その CSS を「借用」して位置/スタイルのヒントを得ることができます =) jQuery UI ダイアログのみを使用することを強くお勧めします (開く/閉じるの側面を処理するため、背景モーダル、ボタンなどのオプションがあります)。それが図書館の目的です！;)

AJAXや他の多くの方法など、さまざまな方法で HTML を動的に取得することもできます。

于 2013-09-08T00:51:21.563 に答える