我正在尝试创建一个按钮，一旦点击，将打开一个覆盖窗口，其中包含来自外部文件的HTML。
我试着把这个代码和这里的代码结合起来但我想是出了问题：
<!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>
试试这个：(示例)
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准备好时，这些代码就会运行，这里我使用了一个快捷方式，但没有问题。
当您尝试引用"opener"one_answers"selector"元素时，它们还不在DOM中。尝试在文档就绪事件的回调中包装所有js：http://api.jquery.com/ready/
$(document).ready(function() {
$( ".selector" ).dialog({
autoOpen: false,
open: function(event, ui) {
$('#divInDialog').load('popup.html', function() {
alert('Load was performed.');
});
}
});
$( "#opener" ).click(function() {
$( ".selector" ).dialog( "open" );
});
});