jQuery Mobile 팝업 창

팝업 창은 페이지에 표시될 수 있는 매우 인기 있는 대화 상자입니다.

팝업을 사용하여 텍스트, 사진, 지도 또는 기타 콘텐츠를 표시할 수 있습니다.

팝업 창을 만들려면 <a> 및 <div> 요소를 사용해야 합니다. <a> 요소에 data-rel="popup"을 추가하세요. 속성에서 <div> 요소는 data-role="popup" 속성을 추가합니다. 다음으로 <div>에 대한 ID를 지정한 다음 <a>의 href 값을 <div>에 지정된 ID로 설정합니다. <div>의 내용은 팝업 창에 표시되는 내용입니다.

참고: <div> 팝업 창과 클릭한 <a> 링크는 동일한 페이지에 있어야 합니다.

Example

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
    
    <div data-role="popup" id="myPopup">
      <p>这是一个简单的弹窗</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

팝업 창에 내부 및 외부 여백을 추가해야 하는 경우 " ui" in <div> -content" 클래스:

Instance

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>

    <div data-role="popup" id="myPopup" class="ui-content">
      <h3>欢迎!</h3>
      <p>"ui-content" 类在弹窗使用 <span style="font-size:55px;">样式文本</span> 时是特别有用的，它可以使得弹窗看起来更加美观时尚。 <strong>注意：</strong> 如果需要文本会包含多行。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

Run Instance»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

팝업 창 닫기

기본적으로 팝업 창 밖을 클릭하거나 "Esc" 키를 눌러 팝업 창을 닫습니다. 팝업창을 닫기 위해 팝업창 밖을 클릭하고 싶지 않다면 data-dismissible="false" 속성을 추가하면 됩니다(권장하지 않음). 버튼에 data-rel="back"을 사용하여 팝업 창에 닫기 버튼을 추가할 수도 있습니다. 속성을 설정하고 스타일을 통해 버튼의 위치를 제어합니다. ㅋㅋㅋ

포지셔닝 팝업 창기본적으로 팝업 창은 클릭한 요소 바로 위에 표시됩니다. 팝업 창의 위치를 제어해야 하는 경우 클릭 시 data-position-to 속성을 사용할 수 있습니다. 팝업 창을 여는 데 사용되는 링크입니다. 팝업 창 위치를 제어하는 세 가지 방법: 속성 값data-position-to="window"data-position- to="#myId"



Description
팝업 창이 중앙에 표시됩니다. 의 창

팝업은 알려진 #id 요소

data-position-to="origin"

Default에 표시됩니다. 클릭한 요소에 팝업이 나타납니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window">弹窗窗口显示</a>
    <a href="#myPopup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="#demo">弹窗显示在 id="demo" 元素上</a>
    <a href="#myPopup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="origin">默认显示</a>
     
    <div data-role="popup" id="myPopup1" class="ui-content">
      <p>我显示在窗口的中间部分。</p>
    </div>
    <div data-role="popup" id="myPopup2" class="ui-content">
      <p>我显示在 id="demo" 的元素上。</p>
    </div>
    <div data-role="popup" id="myPopup3" class="ui-content">
      <p>我显示在点击的按钮上。</p>
    </div>
    
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <p>这还是一个段落。</p>
    <p>这是一个段落。这个段落包含了子元素：这是一个插入在段落中 id="demo" 的 <span id="demo" style="color:red;">span</span> 元素 。</p>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 
</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

Transition

기본적으로 팝업 창에는 전환 효과가 없습니다. 필요한 경우 data-transition="value" 속성을 통해 전환 효과(jQuery Mobile 전환)를 추가할 수 있습니다.

모든 전환 효과 인스턴스

Instances

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>以下演示了弹窗所有过渡效果的实例。</p>
    <p><b>注意：</b> 从性能方面上考虑， jQuery Mobile 推荐使用 "pop", "fade" 或 "none" 过渡效果。</p>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">淡入</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flip">翻转</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="flow">抛出当前页后显示</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="pop">弹出</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slide">向左滑动</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidefade">向左滑动并淡入</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slideup">向上滑动 up</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="slidedown">向下滑动</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="turn">转向</a>
    <a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="none" >无过渡效果。</a>

    <div data-role="popup" id="myPopup" class="ui-content">
      <p>这是一个简单的弹窗。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

실행 인스턴스»

"실행"을 클릭하세요. "예제" 버튼을 누르면 온라인 예시를 볼 수 있습니다

팝업창 방향으로 작은 테두리

팝업창 방향으로 작은 테두리를 추가해야 하는 경우 데이터를 활용하면 됩니다. -arrow 속성 및 값 지정 "l"(왼쪽), "t"(위), "r"(오른쪽) 또는 "b"(아래):

Instance

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>点击按钮打开一个带方向边框的弹窗。</p>
    <a href="#myPop1" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">左边</a>
    <a href="#myPop2" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">顶部</a>
    <a href="#myPop3" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">右边</a>
    <a href="#myPop4" data-rel="popup" class="ui-btn ui-btn-inline" data-position-to="#demo">底部</a>
    
    <div data-role="popup" id="myPop1" class="ui-content" data-arrow="l">
      <p>在左边框有个方向。</p>
    </div>
    <div data-role="popup" id="myPop2" class="ui-content" data-arrow="t">
      <p>在顶部边框有个方向。</p>
    </div>
    <div data-role="popup" id="myPop3" class="ui-content" data-arrow="r">
      <p>在右边框有个方向。</p>
    </div>
    <div data-role="popup" id="myPop4" class="ui-content" data-arrow="b">
      <p>在底部边框有个方向。</p>
    </div>

    <p>这是一个段落，用于实例展示。弹窗显示在 <span id="demo" style="color:red;">这里</span>。</p>
  </div>
  <div data-role="footer">

    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

인스턴스 실행»
"인스턴스 실행"을 클릭하세요. 온라인 예제 보기 버튼

팝업 대화 상자

팝업 창을 표준 대화 상자(머리글, 내용 및 하단 표시)로 만들 수 있습니다.

Instance

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">打开对话框弹窗</a>

    <div data-role="popup" id="myPopupDialog">
      <div data-role="header">
        <h1>头部文本</h1>
      </div>

      <div data-role="main" class="ui-content">
        <h2>欢迎访问弹窗对话框!</h2>
        <p>jQuery Mobile 非常有意思!</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">返回</a>
      </div>

      <div data-role="footer">
        <h1>底部文本</h1>
      </div>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

</body>
</html>

인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

그림 팝업 창

팝업 창에 그림을 표시할 수 있습니다:

Instance

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div id="pageone" data-role="main" class="ui-content">
    <p>点击图片放大它。</p>
    <p>注意我们在右上角添加了 "返回按钮"。</p>
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" alt="Skaret View" style="width:200px;"></a>

    <div data-role="popup" id="myPopup">
      <p>这是我的图片！</p> 
      <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" style="width:800px;height:400px;" alt="Skaret View">
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

인스턴스 실행»
온라인 예시를 보려면 "인스턴스 실행" 버튼을 클릭하세요

팝업 창 배경 오버레이

data-overlay-theme 속성을 사용하여 팝업 창 뒤에 배경색을 추가할 수 있습니다.

오버레이의 배경색은 기본적으로 투명합니다. 밝은 배경을 추가하려면 data-overlay-theme="a"를 사용하고, 어두운 오버레이 배경을 추가하려면 data-overlay-theme="b"를 사용하세요.

Instance

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>

    <div data-role="popup" id="myPopup" class="ui-content" data-overlay-theme="b">
      <p>在我身后有个深色背景。</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

인스턴스 실행»
"을 클릭하세요. 온라인 예제를 보려면 "예제" 버튼을 실행하세요.

일반 그림 팝업은 종종 배경 오버레이를 사용합니다:

Examples

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
  </div>

  <div id="pageone" data-role="main" class="ui-content">
    <p>点击图片放大它。</p>
    <p>注意我们在右上角添加了 "返回按钮"。</p>
    <a href="#myPopup" data-rel="popup" data-position-to="window">
    <img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" alt="Skaret View" style="width:200px;"></a>

    <div data-role="popup" id="myPopup" data-overlay-theme="b">
      <p>这是我的图片！</p> 
      <a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="http://www.php.cn/wp-content/uploads/2015/10/php.jpeg" style="width:800px;height:400px;" alt="Skaret View">
    </div>
  </div>

  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div> 

</body>
</html>

예제 실행 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

참고: 다음 장에서는 팝업 창에서 양식을 사용하는 방법을 배우게 됩니다.

← jQuery 모바일 버튼 아이콘

jQuery 모바일 도구 모음 →

제출하다