固定位置にあるJqueryモバイルショーのすべてのポップアップデータ位置

Question

jquery mobileにフォームを書き込もうとしました。すべてのフィールドラベルにはポップアップアイコンがあります。このフォームはうまくいきましたが、今問題があります！下のポップアップアイコンをクリックすると、ポップアップがフォームの上端と固定の位置に開きます。私は何が起こったのか分からない。私を助けてください。ありがとうございました。

<form class="form-inline" role="form" method="post" action="php/formUserP1.php" id="formP1" name="formP2"> 

     <fieldset class="ui-grid-a"> 
      <h2 class="ui-block-a"> 

       <sup class="dont-print"> 
        <a href="#Page01Tooltip" data-rel="popup" data-transition="flip" 
         class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
         title=" "></a> 
       </sup> 
       <div data-role="popup" id="Page01Tooltip" class="ui-content" data-overlay-theme="a" 
        style="max-width:350px;"> 
        <p dir="ltr"> 
         Personal Information 
        </p> 
       </div> 
      </h2> 
      <div id="imageBlock" class="ui-block-b" align="center"> 
       <!-- Image --> 
       <div id="imagePreview"></div> 

       <div class="fileUpload"> 
         <span> 
Image 
         </span> 
        <input id="uploadImage" type="file" class="upload" name="image" /> 
        <sup class="dont-print"> 
         <a href="#uploadImageTooltip" data-rel="popup" data-transition="flip" 
          class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
          title=" "></a> 
        </sup> 
        <div data-role="popup" id="uploadImageTooltip" class="ui-content" data-overlay-theme="a" 
         style="max-width:350px;"> 
         <p dir="ltr"> 
          Your Image 
         </p> 
         <img src="images/image-sample.jpg"> 
        </div> 
       </div> 
       <!-- End of Image --> 
      </div> 
     </fieldset> 

     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <label for="FirstNameFa" id="00" > 
       FirstNameFa 
       <sup class="dont-print"> 
          <a href="#FirstNameFaTooltip" data-rel="popup" data-transition="flip" 
          class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
          title=" "></a></sup> 
         <div data-role="popup" id="FirstNameFaTooltip" class="ui-content" data-overlay-theme="a" 
          style="max-width:350px;"> 
          <p dir="ltr"> 
           Write your first name using the Persian alphabet. 
          </p> 
         </div> 
        </label> 
        <input type="text" class="form-control input" data-clear-btn="true" placeholder=" " 
          name="FirstNameFa" id="FirstNameFa" maxlength="40" required> 
       </div> 
       <div data-role="fieldcontain"> <!-- for inline label and input --> 
        <label for="FirstNameEn"> 
         FirstNameEn 
         <sup class="dont-print"> 
          <a href="#FirstNameEnTooltip" data-rel="popup" data-transition="flip" 
          class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
          title=" "></a></sup> 
         <div data-role="popup" id="FirstNameEnTooltip" class="ui-content" data-overlay-theme="a" 
          style="max-width:350px;"> 
          <p dir="ltr"> 
           In Latin script, write your first name as it appears in your passport. 
          </p> 
         </div> 
        </label> 
        <input type="text" class="form-control" data-clear-btn="true" placeholder="Your First Name in English" 
          name="FirstNameEn" id="FirstNameEn" maxlength="40" required> 
       </div> 
       <div data-role="fieldcontain"> <!-- for inline label and input --> 
        <label for="LastNameFa"> 
         LastNameFa 
         <sup class="dont-print"> 
          <a href="#LastNameFaTooltip" data-rel="popup" data-transition="flip" 
          class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
          title=" "></a></sup> 
         <div data-role="popup" id="LastNameFaTooltip" class="ui-content" data-overlay-theme="a" 
          style="max-width:350px;"> 
          <p dir="ltr"> 
           Write your family name using the Persian alphabet. 
          </p> 
         </div> 
        </label> 
        <input type="text" class="form-control" data-clear-btn="true" placeholder=" " 
          name="LastNameFa" id="LastNameFa" maxlength="40" required> 
        </div> 
       <div data-role="fieldcontain"> <!-- for inline label and input --> 
        <label for="LastNameEn"> 
           . 
         <sup class="dont-print"> 
          <a href="#LastNameEnTooltip" data-rel="popup" data-transition="flip" 
          class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
          title=" "></a></sup> 
         <div data-role="popup" id="LastNameEnTooltip" class="ui-content" data-overlay-theme="a" 
          style="max-width:350px;"> 
          <p> 
           In Latin script, write your family name as it appears in your passport. 
          </p> 
         </div> 
        </label> 
        <input type="text" class="form-control" data-clear-btn="true" placeholder="Your Last Name in English" 
          name="LastNameEn" id="LastNameEn" maxlength="40" required> 
       </div> 


     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <fieldset data-role="controlgroup" data-type="horizontal" id="Gender"> 
       <legend> 
        Gender 
        <sup class="dont-print"> 
         <a href="#GenderTooltip" data-rel="popup" data-transition="flip" 
          class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
          title=" "></a></sup> 
        <div data-role="popup" id="GenderTooltip" class="ui-content" data-overlay-theme="a" 
          style="max-width:350px;"> 
         <p dir="ltr"> 
          What is your gender 
         </p> 
         <ul dir="ltr"> 
          <li> 
           Male 
          </li> 
          <li> 
           Female 
          </li> 
         </ul> 
        </div> 
       </legend> 
        <label for="Male" class="radio-inline"> 

         <input type="radio" class="form-control" name="Gender" value="1" id="Male" required> 
        </label> 
        <label for="Female" class="radio-inline"> 

         <input type="radio" class="form-control" name="Gender" value="2" id="Female" 
        </label> 
      </fieldset> 
     </div> 
     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <label for="PassportNo"> 
       PassportNo 
       <sup class="dont-print"> 
        <a href="#PassportNoTooltip" data-rel="popup" data-transition="flip" 
         class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
         title=" "></a></sup> 
       <div data-role="popup" id="PassportNoTooltip" class="ui-content" data-overlay-theme="a" 
        style="max-width:350px;"> 
        <p dir="ltr"> 
         Write your passport number. 
        </p> 
       </div> 
      </label> 
      <input type="text" data-clear-btn="true" class="form-control" placeholder=": A11487661" 
        name="PassportNo" id="PassportNo" maxlength="30" required> 
     </div> 

     <div data-role="fieldcontain"> <!-- for inline label and input --> 
       Nationality 
       <sup class="dont-print"> 
        <a href="#NationalityTooltip" data-rel="popup" data-transition="flip" 
        class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
        title=" "></a></sup> 
       <div data-role="popup" id="NationalityTooltip" class="ui-content" data-overlay-theme="a"> 
         What is your nationality 

       </div> 
     </div> 
     <div> 
       BirthDate 

        <a href="#BirthDateTooltip" data-rel="popup" data-transition="flip" 
         class=" ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
         title="Help"></a> 
       <div data-role="popup" id="BirthDateTooltip" class="ui-content" data-overlay-theme="a"> 
         Write your birthdate as it appears in your passport (day, month, year according to the Gregorian calendar) 
       </div> 
     </div> 


     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <label for="CountryBirth"> 
       CountryBirth 
       <sup class="dont-print"> 
        <a href="#CityBirthTooltip" data-rel="popup" data-transition="flip" 
       class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
       title=" "></a></sup> 
      <div data-role="popup" id="CityBirthTooltip" class="ui-content" data-overlay-theme="a" 
       style="max-width:350px;"> 
       <p dir="ltr"> 
        Write the name of the country and the city in which you were born. 
       </p> 
      </div> 
      </label> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <select class="form-control" name="CountryBirth" id="CountryBirth" dir="ltr"> 
        <option value=""> 

        </option> 
       </select> 
      </fieldset> 
      <input type="text" data-clear-btn="true" class="form-control" placeholder=" . : " 
        name="CityBirth" id="CityBirth" maxlength="30"> 
     </div> 
     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <label for="CountryResidence"> 
       CountryResidence 
       <sup class="dont-print"> 
        <a href="#CountryResidenceTooltip" data-rel="popup" data-transition="flip" 
       class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
       title=" "></a></sup> 
      <div data-role="popup" id="CountryResidenceTooltip" class="ui-content" data-overlay-theme="a" 
       style="max-width:350px;"> 
       <p dir="ltr"> 
        Write the name of the country and the city in which you live now. 
       </p> 
      </div> 
      </label> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <select class="form-control" name="CountryResidence" id="CountryResidence" dir="ltr"> 
        <option value=""> 

        </option> 
       </select> 
      </fieldset> 
      <input type="text" data-clear-btn="true" class="form-control" placeholder=" . : " 
        name="CityResidence" id="CityResidence" maxlength="30"> 
     </div> 
     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <label for="HomeTel"> 
       HomeTel 
       <sup class="dont-print"> 
       <a href="#HomeTelTooltip" data-rel="popup" data-transition="flip" 
       class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
       title=" "></a></sup> 
      <div data-role="popup" id="HomeTelTooltip" class="ui-content" data-overlay-theme="a" 
       style="max-width:350px;"> 
       <p dir="ltr"> 
        Write your home phone number, including the city and country code. 
       </p> 
      </div> 
      </label> 
      <input type="number" data-clear-btn="true" class="form-control" placeholder=": 00982122414393" 
        name="HomeTel" id="HomeTel" maxlength="15"> 
     </div> 
     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <label for="Mobile"> 
       Mobile 
       <sup class="dont-print"> 
       <a href="#MobileTooltip" data-rel="popup" data-transition="flip" 
       class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
       title=" "></a></sup> 
      <div data-role="popup" id="MobileTooltip" class="ui-content" data-overlay-theme="a" 
       style="max-width:350px;"> 
       <p dir="ltr"> 
        Write your cell phone number, including the country code. 
       </p> 
      </div> 
      </label> 
      <input type="number" data-clear-btn="true" class="form-control" placeholder=": 0098912345678901" 
        name="Mobile" id="Mobile" maxlength="15" > 
     </div> 
     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <label for="WorkTel"> 
       WorkTel 
       <sup class="dont-print"> 
       <a href="#WorkTelTooltip" data-rel="popup" data-transition="flip" 
       class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
       title=" "></a></sup> 
      <div data-role="popup" id="WorkTelTooltip" class="ui-content" data-overlay-theme="a" 
       style="max-width:350px;"> 
       <p dir="ltr"> 
        Write your work phone number, including the city and country code. 
       </p> 
      </div> 
      </label> 
      <input type="number" data-clear-btn="true" class="form-control" placeholder=": 00982122414393" 
        name="WorkTel" id="WorkTel" maxlength="15"> 
     </div> 
     <div data-role="fieldcontain"> <!-- for inline label and input --> 
      <label for="Email"> 
Email 
       <sup class="dont-print"> 
        <a href="#EmailTooltip" data-rel="popup" data-transition="flip" 
         class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext ui-mini" 
         title=" "></a></sup> 
       <div data-role="popup" id="EmailTooltip" class="ui-content" data-overlay-theme="a" 
        style="max-width:350px;"> 
        <p dir="ltr"> 
Your email address. 
        </p> 
       </div> 
      </label> 
      <input type="email" data-clear-btn="true" class="form-control" name="Email" id="Email" disabled/> 
     </div> 
     <br> 
     <input type="submit" class="form-control dont-print" data-icon="arrow-l" data-inline="true" name="next02" id="next02" value=" "> 

     <br> 

     </form> 

Answer 1

ポップアップを開くボタンにdata-position-to="window"を追加します。

jQuery Mobile pop-up position.

Answer 2

のhref = "＃1 Page01Tooltip" データのrel = "ポップアップ" データ遷移= "フリップ" が

使用：データ位置= "ウィンドウ"