Question

我有一个由onClick事件激活的jquery-mobile popup #graphic-menu（getPosition()在另一个包含的脚本中，并按预期工作）：

HTML

<a href="#" id="gm-btn" onclick="showGM(getPosition(this));">Graphic menu</a>

CSS

function showGM(pos){
    $("#menu-buttons").popup("close");  
    $("#menu-buttons").bind({
        popupafterclose: function(event, ui){  
            $("#graphic-menu").popup("open", {x:pos.x, y:pos.y});
        }
    });                        
}

问题在于#gm-btn本身就是父弹出#menu-buttons的一部分：

被召唤多次出现
出现在不同的位置（它是一个可拖动的元素）

当父弹出窗口首次出现时，

showGM(pos)使用#gm-btn的位置，并且在重新点击后，后续子弹出窗口不会更改。

如何让showGM(getPosition(this))在调用时正确重新计算#gm-btn的位置（或者更可能是我在代码中搞砸了什么）？

编辑：目前，我通过将位置存储在具有全局范围的变量（因为只有#menu-buttons只有一个#graphic-menu）并将其传递给{ {1}}所以它知道在哪里打开。我认为这可能不是一个好的编程习惯，所以如果有人有更好的建议，我很乐意听到它。

Answer 1

基于API（http://api.jquerymobile.com/popup/），他们说：

注意：不允许链接弹出窗口：“框架目前不支持弹出窗口的链接，因此无法嵌入弹出窗口   从一个弹出窗口链接到另一个弹出窗口。所有链接都有   弹出窗口中的data-rel="popup"根本不会做任何事情。“

使链接弹出窗口正常工作的解决方法是使用超时   绑定到调用弹出窗口的popupafterclose事件中的示例。在   以下示例，当第一个弹出窗口关闭时，第二个弹出窗口将关闭   通过延迟调用open方法打开：
$( document ).on( "pageinit", function() {
    $( ".popupParent" ).on({
        popupafterclose: function() {
            setTimeout(function() { $( ".popupChild" ).popup( "open" ) }, 100 );
        }
    });
});

关于jsFiddle，它适用于这种类型的测试：https://jsfiddle.net/Twisty/4gjdp4te/7/你没有设置JQuery库，所以我将它设置为2.1.3，并保留了你的JQM 1.4.5链接。

到目前为止，我的尝试并没有产生你想要的结果，但你至少可以看出要采取的方向。我打算继续努力，并会更新我的答案。

<强> HTML

<div data-role="page">
  <div role="main" class="ui-content">
    <a id="anchor1" href="#pop-1" data-rel="popup" data-transition="pop">Basic Popup</a>
    <div data-role="popup" id="pop-1" data-position-to="#anchor1">
      <p>This is a basic popup.</p>
      <button id="firstbutton" data-rel="popup">Button to open 2nd popup</button>
    </div>
    <div data-role="popup" id="pop-2">
      <p>This is another basic popup.</p>
    </div>
  </div>
</div>

<强> JQUERY

var buttonClick = false;

$(document).on("pageinit", function () {
  $("#pop-1").on({
    popupafterclose: function () {
      if (buttonClick) {
        console.log("Opening 2nd Popup.");
        setTimeout(function () {
          $("#pop-2").popup("open", {
            positionTo: "#pop-1"
          })
        }, 100);
        buttonClick = false;
      } else {
        console.log(buttonClick);
      }
    }
  });
});

$(document).ready(function () {
  $("#firstbutton").click(function () {
    buttonClick = true;
    console.log("First Button clicked");
    $("#pop-1").popup("close");
  });
});

修改

我得到了您需要的代码：https://jsfiddle.net/Twisty/4gjdp4te/8/

<强> JQUERY

var buttonClick = false; $(document).ready(function () { $("#pop-1").popup({ afterclose: function(){ if (buttonClick) { console.log("Opening 2nd Popup."); setTimeout(function () { $("#pop-2").popup("open", { positionTo: "#pop-1" }) }, 100); buttonClick = false; } else { console.log(buttonClick); } } }); $("#firstbutton").click(function () { buttonClick = true; console.log("First Button clicked"); $("#pop-1").popup("close"); }); });

Jquery移动链式弹出式动态定位

1 个答案: