将加载外部html作为中途停留的按钮？答案

【问题标题】：button that would load an external html as a layover?将加载外部html作为中途停留的按钮？
【发布时间】：2014-03-19 01:56:16
【问题描述】：

我正在尝试创建一个单击后的按钮，将打开一个覆盖窗口，其中包含来自外部文件的 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>

【问题讨论】：

首先，<div class="selector"/> 应该是<div class="selector">。
$( "#selector" ).dialog( "open" ); 应该是$( ".selector" ).dialog( "open" );

标签： javascript jquery

【解决方案1】：

当您尝试引用它们时，您的 'opener' 和 '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" );
    });
});

【讨论】：

这似乎有效，谢谢，但是为什么我一打开页面就显示弹出窗口，而不是仅在我单击按钮时显示？
在对话框中将 autoOpen 设置为 false：api.jqueryui.com/dialog/#option-autoOpen（默认为 true）
我编辑了代码以添加 autoOpen: false 示例

【解决方案2】：

试试这个：(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 准备好时运行这些代码，这里我使用了快捷方式但没问题。

【讨论】：

选择器不错。但是我认为这不会起作用，因为匿名函数在加载后立即执行，但元素尚未出现在页面上。
谢谢，两个答案似乎都有效，所以我看不出区别
@jayjay，阅读我的回答，我已经解释的所有内容，$(function(){ }) 只是$(document).ready(function(){ }) 的快捷方式。
@jayjay，你也有无效的HTML，我在回答中提到过。
@SheikhHeera 也许我错了，但如果您在选项中指定“onload”，jsfiddle 会将您的 js 包装在负载处理程序中。请参阅此链接：stackoverflow.com/questions/19203922/jsfiddle-wrap-in-onload。并且 $(function() { etc 不是 $(document).ready(function() { etc 的快捷方式