Question

我正在实施一个屏幕，但我面临一个问题，我的弹出屏幕显示在中心。但我需要在底部按钮上方弹出屏幕。

你能告诉我如何给出我弹出屏幕的位置和照片一样。这是我的代码。

这是我的小提琴 http://jsfiddle.net/ravi1989/q2pWL/20/

<div data-role="page" id="foo">
    <div data-role="header"style="background: green;">
        <h1>Wbservice</h1>
    </div>
    <!-- /header -->

    <div data-role="content"></div>

    <!--pop up screen-->
    <div data-role="popup" id="webservice" data-close-btn="none" >
        <div data-role="header"style="background: green;">
            <h1>Wbservice new/edit</h1>
        </div>

        <input name="webserviceName" value="" type="text" autocapitalize="off" placeholder="Name the web Service">
        <input name="Address" value="" type="text" autocapitalize="off" placeholder="Address of webservice">
    </div>
    <!-- /content -->

    <div class="customFooter" data-role="footer">
        <img src="http://placehold.it/42x42" id="Test"/>
        <img src="http://placehold.it/42x42"/>
        <h4>Page Footer</h4>

    </div>
    <!-- /header -->
</div>
<!-- /page -->

Answer 1

尝试使用此positionTo测试div

$("#Test").click(function(){
     $('#webservice').popup("open",{positionTo: '#Test'})

});

此选项也可以在弹出式div

中公开为data attribute: data-position-to="#Test"

<强> DEMO

<强> jQuery Mobile Popup Options Doc

Answer 2

在弹出式div中添加一个三角形，并使用（x，y）坐标定位弹出窗口。

<强> Demo

<强> CSS

.tooltip_arrow {
  position: absolute;
  bottom: -9px;
  left: 10px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #000 transparent transparent transparent;
}

<强> HTML

<div data-role="popup" id="webservice" data-close-btn="none">
  <div data-role="header" style="background: green;">
    <h1>Wbservice new/edit</h1>
  </div>
  <div data-role="content">
    <input name="webserviceName" value="" type="text" autocapitalize="off" placeholder="Name the web Service" />
    <input name="Address" value="" type="text" autocapitalize="off" placeholder="Address of webservice" />
    <div class="tooltip_arrow"></div> <!-- arrow div -->
  </div>
</div>

定位弹出窗口并更改背景颜色

$("#Test").on('click', function () {
  var x_pos = $(this).offset().left,
      y_pos = $(this).offset().top;
  $('#webservice').popup("open", {
    x: x_pos,
    y: y_pos
  });
  $('#webservice').css('background', 'black'); /* change color here */
});

弹出定位

2 个答案: