2

以下非常简单的代码将触发一个非常标准的 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>

感谢你的协助。

干杯，

克劳德

4

3 回答 3

4

在打开的触发器中，您可以从页面上的某处附加 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>

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

于 2013-08-03T21:47:19.970 回答
2

脚本

$("#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 :事件（更多内容）和一些格式良好的 AJAX 来实现。

jsFiddle Demo 来证明吧！

于 2013-08-03T21:44:31.770 回答
0

保持简单：将脚本放在 Head 标签中：

<!-- 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>

设置您的 a href 标签：

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

希望这可以帮助。

于 2013-09-22T07:13:12.857 回答