2

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

你能告诉我如何让我的弹出屏幕的位置与这张照片中的一样。这是我的代码。

这是我的小提琴 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 -->
4

2 回答 2

1

试试这个来positionTo测试 div

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

});

此选项也可以data attribute: data-position-to="#Test"在您的弹出 div 中显示为

演示

jQuery Mobile 弹出选项文档

于 2013-10-11T08:51:31.943 回答
0

将一个三角形添加到您的弹出 div，并使用 (x,y) 坐标定位弹出窗口。

演示

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 */
});
于 2013-10-11T09:54:23.727 回答