来自链接的简单 JQuery UI 对话框答案

【问题标题】：Simple JQuery UI dialog from link来自链接的简单 JQuery UI 对话框
【发布时间】：2021-10-31 18:50:40
【问题描述】：

我已经对此进行了几个小时的试验，但我仍然感到困惑。

我试图在单击链接（[a] 标记）时打开一个 JQuery UI 对话框（模式），从链接的 href 获取对话框窗口的内容。

到目前为止，我（从各个地方收集到）testb.html 是一个简单的 html 片段：

<div><p>Some text</p><p>more text</p</div>

这个想法是，当点击锚（链接）时，testb.html 的内容会出现在对话框中。

为什么这不起作用？？？

David（70 岁的阿尔茨海默病前程序员，几乎没有 HTML 经验）

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  <script>
    $("a.modal").click(function(e) {
      e.preventDefault();
      $(".container").load(this.href).dialog("open");
    });
  </script>
</head>

<body>

  <div class="container"></div>
  <p><a href="testb.html" class="modal">Click!</a></p>

</body>

</html>

【问题讨论】：

标签： javascript html jquery dialog anchor

【解决方案1】：

您可以使用此代码：

    <!doctype html>
    <html lang="en">
    
    <head>
        <title>Title</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    </head>
    
    <body>
    
        <div class="container">
        <p><a href="javascript:void(0)" data-get="testb.html" class="modal">Click!</a></p>
</div>
        <div id="dialog" title="Basic dialog"></div>
        
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    
        <script>
            $('.modal').on('click', function () {
                var data = $(this).attr('data-get')
                $('#dialog').html(data)
                $("#dialog").dialog()
            });
        </script>
    </body>
    
    </html>

【讨论】：

【解决方案2】：

您在页面上存在元素之前运行分配。将其包装在负载处理程序中

$(function() { // on page load
  $("a.modal").click(function(e) {
    e.preventDefault();
    $(".container").load(this.href) 
  });
})

您无法按照您尝试的方式将容器作为对话框打开。你需要类似的东西

$(function() { // on page load
  $(".container").dialog({
   autoOpen: false,
   width: 750,
   modal: true
 });

 $("a.modal").click(function(e) {
   e.preventDefault();
   $(".container").load(this.href) 
   $(".container").dialog('open');
 });
})

【讨论】：

【解决方案3】：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#modal" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#modal" ).dialog( "open" );
            });
         });
      </script>
</head>

<body>

  <div id="modal">This my first jQuery UI Dialog!</div>
  <p><a href="#" id="opener">Click!</a></p>

</body>

</html>

这会在单击锚标记时打开一个 jquery 对话框模式。

【讨论】：

【解决方案4】：

结合前面的答案，我得到了这个，它有效！

<!doctype html>
<html lang="en">

<head>
    <title>Title</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>

<body>

    <p><a href="testb.html" class="modal">Click!</a></p>
    <div id="dialog" title="Basic dialog"></div>
    
    <script>
        $('.modal').on('click', function (e) {
            e.preventDefault();
            $('#dialog').load(this.href)
            $("#dialog").dialog()
        });
    </script>
</body>

</html>

随着codeangler的回答，对话框出现了，但没有testb.html的内容，而是div的内容。有了mplungjan的回答......好吧，我无法让它工作。随着 Sepehr Pourjozi 的回答，对话框出现但包含文字文本“testb.html”，而不是 testb.html 的内容。

从所有三个答案中得到提示，我得到了它的工作。现在我对 JQuery 对话框有了更好的理解。

谢谢大家。

大卫

【讨论】：