jquery - 在打开参数之前将 HTML 放入 jQuery 模式对话框中

Question

以下非常简单的代码将触发一个非常标准的 jQuery 模式对话框:

$(function() {
    $( "#dialog" ).dialog({
      title: "Dialog Box",
      height:300,
      modal: true,
      buttons: {
        "Go": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

然后对话框的主体将具有如下 HTML:

<div id="dialog" title="Some dialog">
  <p>Stuff goes here</p>
  <p>Stuff goes there</p>
</div>

有没有办法使用 jQuery 获取 HTML 并将其放置在主对话框函数中，以便对话框“预加载”HTML？

澄清一下:

这可能是使用 jQuery 模式对话框执行此操作的唯一或正确的方法，我只是想知道是否还有其他方法。理想情况下，我的函数如下所示:

$(function() {
    $( "#dialog" ).dialog({
      title: "Dialog Box",
      height:300,
      modal: true,
      // some HTML goes here, do not know if such option exists
      buttons: {
        "Go": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });

然后对话框的主体将依次包含以下内容:

<div id="dialog" title="Some dialog">
</div>

感谢您的帮助。

干杯，

克劳德

Answer 1

在打开的触发器中，您可以附加 ajax 响应或硬编码的 html 或来自页面上某处的 html 或类似内容:

http://jsfiddle.net/Cekp6/

            <script>  

            function infoBox(title,text,sel){

                $('#'+sel+'').dialog({
                open: function( event, ui ) {
                    if(text){
                        $('#'+sel+'').append(text);

                    }
                },
                beforeClose: function( event, ui ) {
                    if(text){
                        $('#'+sel+'').empty();
                    } 
                },
                show:'fade' , position:'center', resizable: false, modal:true,
                title:title
            });
            }
            $(function() {


                $('#btn1').click(function(){
                    var text = "<div><ul><li><span>heyo</span></li><li><span>heyooo</span></ul></div>";
                    var title = 'append html';
                    var sel = 'emptyDialog';
                    infoBox(title,text,sel)
                });

                $('#btn2').click(function(){
                    var title = 'use different dialoges';
                    var sel = 'dialog1';
                    infoBox(title,null,sel)

                });

                $('#btn3').click(function(){
                    var title = 'use different dialoges';
                    var sel = 'dialog2';
                    infoBox(title,null,sel)

                });

            });
            </script>

关闭前不要忘记删除附加内容