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

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 に答える