jquery弹出关闭功能不起作用 [英] jquery popup close function not working

问题描述

我的手机网站上有按钮。我想要做以下事情：

当我按下按钮时，弹出窗口应该出现。这个弹出窗口应该包含一些文本和一个OK按钮。当我按下确定按钮弹出窗口应该消失，没有别的。

我的代码如下：

 < a id =edit-btn2data-rel =popupdata-transition =slidedata-position-to =windowclass =edit-button1data-role =button href =＃popupPanel>< / a> 
 
< div data-role =popupid =popupPaneldata-dismissible ='false'data-corners =falsedata-theme =bstyle =height：100px ; width：300px;> 
< p>这只是一个演示< / p> 
< button href =＃id =popup-buttondata-theme =cdata-icon =falsedata-mini =false>确定< / button> 
< / div> 
  

javascript如下：

 $（#popupPanel）.popup（close）; 
}） ; 
  

目前情况是：

当我点击ok按钮，它第一次工作，但不是后者。

使用< a> ，而不是<按钮> 。您的代码应该如下所示：

 < a id =edit-btn2data-rel =popupdata- transition =slidedata-position-to =windowclass =edit-button1data-role =buttonhref =＃popupPanel>< / a> 
 
 
< p>这只是一个演示< / p> 
< a href =＃data-role =buttondata-rel =backid =popup-buttondata-theme =cdata-icon =falsedata-mini =假>确定< / a> 
< / div> 
  

演示

我还添加了

 data-role =buttondata-rel =back

在这种情况下，Javascript不是必需的

I have button on my mobile website. I want to do following:

when I press the button the popup should appear. This popup should contain some text and a OK button. When I press Ok button the popup should disapear, nothing else. The page should stay in the same conditions.

My code is as follows:

<a id="edit-btn2" data-rel="popup" data-transition="slide" data-position-to="window" class= "edit-button1"  data-role="button" href="#popupPanel"></a>

<div data-role="popup" id="popupPanel" data-dismissible='false' data-corners="false" data-theme="b"  style="height:100px; width:300px;">
  <p>This is just a demonstrator</p>
  <button href="#" id= "popup-button"  data-theme="c" data-icon="false" data-mini="false"  >OK</button>
</div>

The javascript is as follows:

$( "#popup-button" ).click(function() {
  $( "#popupPanel" ).popup( "close" );
});

Current situation is:

When I click on the ok button it works for the very first time but not latter.

解决方案

Use <a> instead of <button>. Your code should look like this:

<a id="edit-btn2" data-rel="popup" data-transition="slide" data-position-to="window" class="edit-button1" data-role="button" href="#popupPanel"></a>

<div data-role="popup" id="popupPanel" data-dismissible="false" data-corners="false" data-theme="b" style="height:100px; width:300px;">
  <p>This is just a demonstrator</p>
  <a href="#" data-role="button" data-rel="back" id="popup-button" data-theme="c" data-icon="false" data-mini="false" >OK</a>
</div>

Demo

I've also added

data-role="button" data-rel="back"

Javascript isn't necessary in this case

这篇关于jquery弹出关闭功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！