我正在尝试创建一个一旦单击的按钮,
将会打开一个覆盖窗口,其中包含来自外部文件的HTML。
我试图结合this code with the code here
但是我猜是错误的:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$( ".selector" ).dialog({
open: function(event, ui) {
$('#divInDialog').load('popup.html', function() {
alert('Load was performed.');
});
}
});
$( "#opener" ).click(function() {
$( "#selector" ).dialog( "open" );
});
</script>
</head>
<body>
<div class="selector"/>
<div id="divInDialog"></div></div>
<button id="opener">Open Dialog</button>
</body>
</html>
最佳答案
试试这个:(Example)
HTML:您已使用<div class="selector"/>
<div class="selector">
<div id="divInDialog"></div>
</div>
<button id="opener">Open Dialog</button>
JS:
$(function(){
$( ".selector" ).dialog({
'autoOpen':false,
open: function(event, ui) {
$('#divInDialog').load('popup.html', function() {
alert('Load was performed.');
});
}
});
$( "#opener" ).click(function() {
$( ".selector" ).dialog( "open" );
});
});
您需要使用
'autoOpen':false
在初始化时停止自动弹出窗口加载。另外,您已使用$( "#selector" ).dialog( "open" );
,但应使用.
而不是#
,因为#
表示id
,而.
表示类并且您具有<div class="selector">
。另外,请始终将您的
jQuery
代码放在$(document).ready(function(){ //... })
中,以便这些代码在DOM
准备就绪时运行。在这里,我使用了快捷方式,但没有问题。关于javascript - 按钮将加载外部html作为中途停留?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21868582/