jQuery Mobile Popup destroy()方法

jQuery Mobile Popup destroy()方法

jQuery Mobile是一个建立在jQuery之上的JavaScript库,它被用来建立快速和响应式的网站,可以在各种设备上访问,如手机、标签和台式机等等。

在这篇文章中,我们将jQuery Mobile Popup destroy()方法来销毁一个弹出窗口。当我们对一个弹出式窗口调用destroy()方法时,弹出式窗口的功能将从弹出式窗口元素中移除,并返回到它的预启动状态。

语法:

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

参数:该方法不接受任何参数。

CDN链接:要使用Popup元素,首先要在你的项目中添加jQuery Mobile。

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

例子:在下面的例子中,我们将打开一个弹出窗口,并在3000ms后调用destroy()方法。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Popup - reposition method</title>
  
    <link rel="stylesheet"
          href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js">
    </script>
  
    <script>
      function openAndDestroyPopup(){
        ( "#popup1" ).popup( "open", 
                             {positionTo: "#target"} );
  
        // Destroy the popup 3 seconds after opening
        setTimeout(() => {
          ( "#popup1" ).popup( "destroy");
        }, 3000);
      }
    </script>
  </head>
  <body>
    <div data-role="page">
      <center>
        <h2 style="color: green">GeeksforGeeks</h2>
        <h3>jQuery Mobile Popup destroy Method</h3>
  
        <p id="target">
          Popup will open here and will
          destroy after 3 seconds
        </p>
   
        <div data-role="popup" id="popup1">
          <p>Welcome to GeeksforGeeks</p>
        </div>
  
        <button style="width: 450px;" 
            onclick="openAndDestroyPopup()">
            Open & Destroy Popup
        </button>
      </center>
    </div>
  </body>
</html>

输出:

jQuery Mobile Popup destroy()方法

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程