JQuery对话框模式框架

问题描述：

我想在我的页面上使用对话框元素，但我遇到了一些问题。看起来盒子本身没有出现。我在正常工作的对话框中有一个iframe（除了一些大小问题），但是框的标题栏和（有时）按钮不显示。我在网上看到，其原因通常是没有包含JQuery UI css文件，但我不认为这是问题，因为我有链接，它是从另一个创建对话框的页面复制的正常。我无法确定它是否相关，但我正在SharePoint Designer中创建页面，并且它使用两种不同的标准来评估页面，其中一个（非工作页面）声称<link>标签是一个错误，说'在XHTML 1.0 Strict中，标记不能包含'。然而，在<link>标签周围没有<div>，并且设计人员还说，此版本的XHTML中不允许使用许多名为<SharePoint:...>的SharePoint创建的选项卡。创建该对话框中的代码供您参考：JQuery对话框模式框架

<div id='am_schedDetailModal' title='Details'> 
    <div class='ui-widget'></div> 
</div>

$(document).ready(function() { 
    $("#am_schedDetailModal").dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { 
      'Close': function() { 
       $(this) 
        .html('') 
        .dialog('close'); 
      } 
     } 
    }); 
}); 


function onClick() { 
    var width = window.innerWidth || 
     document.documentElement.clientWidth || 
     document.body.clientWidth; 
    var height = window.innerHeight || 
     document.documentElement.clientHeight || 
     document.body.clientHeight; 

    $('#am_schedDetailModal').dialog('option', 'width', Math.floor(width * .7)); 
    $('#am_schedDetailModal').dialog('option', 'height', Math.floor(height * .7)); 


    $('#am_schedDetailModal div').html("<iframe id='am_mdl_iframe' src='" + input + "' height='100%' width='100%'>"); 
    $('#am_schedDetailModal').dialog('open'); 
}

这个问题的任何帮助，将不胜感激。

编辑：我相当肯定包含该CSS的<link>根本就没有被加载，因为iframe中示出机智适当<div> S和例如围绕它应显示用的模态框起来。然而，我仍然不明白为什么CSS没有加载。

这似乎工作：http://jsfiddle.net/RQfAK/1/ –

是的，我试过类似的小提琴，它也适用于我。但由于某种原因，CSS并不想在这个页面上加载。 – Crash

答

嗯，我不知道是什么原因，但我找到了一个新的地方把<link>标签，现在它正在加载正确。如果其他人对SharePoint Web部件页面存在此问题，请尝试将标记放在我可能忽略的最明显的位置 - 包含<meta>标记的<asp:Content>标记。

JQuery对话框模式框架

相关推荐