来自 link 的简单 JQuery UI 对话框

Question

我已经试验了几个小时，但我仍然很困惑。

我试图在单击 link（[a] 标记）时打开 JQuery UI 对话框（模态），获取对话框的内容 window 来自 link.

的 href

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

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

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

为什么这行不通？？？

David（70 岁的阿尔茨海默病前期前程序员，HTML 经验很少）s

<!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>

Answer 1

您运行元素存在于页面之前的赋值。将其包装在负载处理程序中

$(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');
 });
})

Answer 2

<!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 对话框模式。

Answer 3

您可以使用此代码：

    <!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>

Answer 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 对话有了更好的理解。

谢谢大家。

大卫

来自 link 的简单 JQuery UI 对话框

Simple JQuery UI dialog from link

html

javascript

anchor

jquery

dialog