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>

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

Answer 2

<强> SCRIPT

$("#dialog").dialog({
    title: "Dialog Box",
    autoOpen: false,
    open: function () {
        $("#dialog").append('<p>See, I was here all the time but you do not get to see me until I am opened! </p><p> <label>Got something to say?</label><input type="text" name = "gibberish" /></p>');
    },
    height: 300,
    modal: true,
    buttons: {
        "Go": function () {
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});
$("#open_sesame").click(function () {
    $("#dialog").dialog("open");
});

<强> HTML

<div id="dialog" title="Some dialog"></div>
<input type="button" id="open_sesame" value="Open Dialog!" />

您展示的方式正是它的完成方式。只需确保<div>与调用对话框初始化位于同一页面上。

如果您正在谈论在打开对话框后动态加载对话框，您可以使用open :事件(more on that)和一些结构良好的AJAX来执行此操作。

jsFiddle Demo to prove it!

Answer 3

保持简单：将脚本放在Head Tags：

中

<!-- JQuery Modal Dialogs -->
<script>
function showDialog(url) {
var htmlstring = $('<div></div>').html('<iframe style="border: 0px; " src="' + url + '" width="100%" height="100%"></iframe>');
$(htmlstring).dialog({
resizable: false, width: 960, height: 720, modal: true, show: { effect: "blind", duration: 500 }, hide: { effect: "blind", duration: 500 }
});
}
</script>

设置你的href标签：

<a href="javascript:showDialog('<Your Data Here>');" class="hrefmodal">Link Display Name</a>

希望这有帮助。

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

3 个答案: