1

次のようなダイアログを含むHTMLコードがあります。

<center>
<a href="#add_auto" id="add_auto" onclick="addAuto();" >
    <img " src="/css/images/add_author_automated.png"; id="add_author_automated"; alt="-"; />
</a>
</center>
<div id="dialog-modal" title="Basic modal dialog" >
    <textarea style="width: 95%; heigth: 400px" name="authors-auto-adding"; id="authors-auto-adding"></textarea>
    <input text-align="center" type="BUTTON" onclick="processAuthorsParagraph();" value="Process";  />
</div>

画像をクリックすると、関数addAutoを呼び出します。

function addAuto()
{
    $( "#dialog-modal" ).dialog({
        height: 300,
        width: 800,
        modal: true
    });
}

ただし、問題は、ページを初めて開いたときに、メインページにダイアログコンテンツが表示されることです。ダイアログを開いてから閉じると、dilogコンテンツがメインページから消えます。

使ってみました

$( "#dialog:ui-dialog" ).dialog( "destroy" );

document.readyにありますが、何も変更されません。

ご協力ありがとうございました。

4

5 に答える 5

3

この行を CSS に追加すると、驚くほどうまくいきます。

#dialog-modal { display: none; }

これにより、モーダルがデフォルトで非表示になります。

于 2012-07-06T13:24:30.703 に答える
3

style="display: none"のタグを入れるだけ<div>

ダイアログが表示されると、スタイルは削除されます。

于 2012-07-06T13:24:34.010 に答える
2

ダイログのラッパーの div 要素の html マークアップに display:none を直接配置できます

    <div id="dialog-modal" title="Basic modal dialog" style="display:none;" >
于 2012-07-06T13:28:02.690 に答える
1

はい、あなたは正しいです。私も同じ問題を抱えていました。解決策は非常に簡単です。HTML コードに出力するのではなく、Javascrip でラップすることもできます...

var your_dialog_html = $('<div>your html code here, but attention: without new lines! in your editor</div>')
var your_dialog = $( your_dialog_html ).dialog({
         /* options here */
});

$('#trigger').click(function() {    
    your_dialog.dialog('open');
    return false; // prevent the default action, e.g., following a link
});
于 2012-07-06T13:24:23.987 に答える
1

を呼び出し$( "#dialog:ui-dialog" ).dialog( "destroy" );ていますが、マークアップに #dialog がありません。

この事実を回避して、問題を解決するために、display: none;CSS 経由で #dialog-modal を設定します。その後、ダイアログのコールバックで$.fn.show()orを使用できます。これは、ダイアログに表示されるまでコンテンツを表示しません。display: block;open

于 2012-07-06T13:29:01.580 に答える