使用按钮单击打开的 jQuery UI 模式未加载网页

jQuery ui modal opened with button click is not loading the webpage

本文关键字：模式 UI 加载 网页 jQuery 按钮 单击      更新时间：2023-09-26

我需要在模态对话框中显示网页。此弹出窗口应仅在单击按钮后出现，其中按钮具有 url 路径。我想出了以下代码，但它显示一个空白的模态窗口。你能建议我在这里可能错过什么吗？谢谢。

   <!doctype html>
<html lang="en">
<head>  <meta charset="utf-8">  
<title>jQuery UI Dialog - Default functionality</title>  
<link rel="stylesheet" href="jquery-ui.css">  
<script src="jquery-1.10.2.js"></script>  
<script src="jquery-ui.js"></script>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css">  
<script type="text/javascript">  
$(function() { 
    $('#clickMe').click(function(event) {
        var link = this;
    $('<div>').dialog({
            modal: true,
            open: function ()
            {
                    $(this).load($(link).attr("href"));
        },         
            height: 400,
            width: 400,
            title: 'This is popup window',
            show: 'puff',
        hide: 'puff'
        });
    });
});
 </script>
</head>
<body>
      <button id="clickMe" href="http://www.google.com/">Google</button>
</body>
</html> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
  $(function() {
    $('#clickMe').click(function(event) {
      var link = this;
      $('<div>').dialog({
        modal: true,
        open: function() {
          console.log('link', link);
          console.log('link.href should be undefined', link.href);
          console.log('$(link).attr("href") should get you the value', $(link).attr("href"));
          $(this).load($(link).attr("href"));
        },
        height: 400,
        width: 400,
        title: 'This is popup window'
      });
    });
  });
</script>
<button id="clickMe" href="http://www.google.com/">Google</button>
<button id="clickMe2" href="http://www.yahoo.com/">Yahoo</button>

问题 1：两个按钮上的id相同，id在整个 HTML 文档中必须是唯一的。

问题 2：您需要使用 $(link).attr("href") 访问 href 的值（请参阅随附的代码段）。

但是在这种情况下（

与Google，Yahoo演示），您将获得CORS（跨源请求错误）。如果在实际应用程序中从同一域加载页面，则应该可以工作。

相关文章：