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

10-11 12:34
查看更多