javascript - 弹窗定位

Question

我正在实现一个屏幕，但我遇到了一个问题，即我的弹出屏幕显示在中央。但我需要底部按钮上方的弹出屏幕。

能否请您告诉我如何将弹出屏幕的位置设置为与此图片中的位置相同。这是我的代码。

这是我的 fiddle 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'})

});

此选项也可以作为 data 属性公开:data-position-to="#Test" 在您的弹出式 div 中

DEMO

jQuery Mobile Popup Options Doc