Question

我正在尝试制作按钮，它会做一些事情并关闭弹出窗口（按钮弹出窗口，我正在使用jquery mobile）

<div class="ui-block-b">
      <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop">Feedback</a>
</div>
<div data-role="popup" id="popupDialog"  data-theme="c">
      <div data-role="header" data-theme="a" class="ui-corner-top">
           <h1>Feedback</h1>
      </div>
      <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
       <h3 class="ui-title">Thank you for your participation!</h3>
       <p>Some content</p>
       <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Cancel</a>
       <input type="button" id="feedback_send" value="Send"  data-inline="true" data-theme="b">
     </div>
</div>

当我点击按钮我想将数据发送到服务器并关闭弹出窗口（我连接发送数据发送到服务器的功能，但我不知道如何关闭弹出窗口），我试图模拟取消点击但它没有关闭。

Answer 1

弹出窗口可以这样关闭：

$( ".selector" ).popup( "close" );

但在你的情况下，你应该像这样使用它：

setTimeout(function(){
    $( ".selector" ).popup( "close" );
},1);

需要setTimeout，因为web-kit浏览器无法轻微延迟关闭弹出窗口。

工作示例：http://jsfiddle.net/Gajotres/B6TgZ/

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#feedback_send', function(){ 
        setTimeout(function(){
            $( "#popupDialog" ).popup( "close" );
        },1);
    });    
});

在关闭弹出窗口之前，请执行所有需要完成的操作。还有另一种方法，您可以随时关闭弹出窗口并触发 popupafterclose 来完成需要完成的任务。

$( "#popupDialog" ).on( "popupafterclose", function( event, ui ) {
    // Do something here, it requires SOlution 1 to trigger popup close
    alert('Popup closed');
});

当然这个解决方案仍然需要按钮来触发弹出关闭功能。但与解决方案1不同的是，在弹出窗口关闭之前，这不会导致轻微的延迟（延迟=在弹出窗口关闭之前将执行的操作）。

Answer 2

我可以在按钮中放置data-rel =“back”，因为我在点击功能上捕获了另一个点击。这样你就可以调用你的函数并关闭弹出窗口。

如何在执行一些代码后尝试在单击按钮上关闭弹出窗口？

2 个答案: