2012-11-15 138 views
0

我在註冊頁面上使用TB 2.0。我已在註冊頁面的底部添加鏈接,讓用戶參閱我們的條款等Twitter引導模式彈出窗口顯示約一秒,然後消失

這是我使用的標記的一個片段:

<div class="container"> 
    <!-- First 2 rows are modal elements --> 
    <div class="row"> 
     <div class="span12"> 
      <div id="userAgreement" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userAgreementLabel" aria-hidden="true"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 id="userAgreementLabel">User Agreement</h4> 
       </div> 
       <div class="modal-body"> 
        <p><?php echo file_get_contents(url_for('@legal',true)); ?></p> 
       </div> 
       <div class="modal-footer"> 
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="span12"> 
      <div id="privacyPolicy" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="privacyPolicyLabel" aria-hidden="true"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 id="privacyPolicyLabel">Privacy Policy</h4> 
       </div> 
       <div class="modal-body"> 
        <p><?php echo file_get_contents(url_for('@privacy', true)); ?></p> 
       </div> 
       <div class="modal-footer"> 
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 

    <h3 align="center">Sign up to Foobar</h3> 
    <br /> 

    <div class="row"> 
     <div class="span5 offset1 gray-1px-rh-border"> 

      <form class="form-horizontal" action="#" method="post"> 
       <div class="control-group"> 
        <label class="control-label" for="inputEmail">Email</label> 
        <div class="controls"> 
         <input type="text" id="inputEmail" placeholder="Email"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label" for="inputUsername">Username</label> 
        <div class="controls"> 
         <input type="text" id="inputUsername" placeholder="Username"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label" for="inputPassword">Password</label> 
        <div class="controls"> 
         <input type="password" id="inputPassword" placeholder="Password"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <label class="control-label" for="inputConfirmPassword">Confirm Password</label> 
        <div class="controls"> 
         <input type="password" id="inputConfirmPassword" placeholder="ConfirmPassword"> 
        </div> 
       </div> 
       <div class="control-group"> 
        <div class="controls"> 
         <label class="checkbox"> 
          <input type="checkbox" id="chk-agree">Agree Terms* 
         </label> 
         <button type="submit" class="btn btn-success" id="signup-button">Get Access</button> 
        </div> 
       </div> 
      </form> 

     </div> 

     <div class="span4"> 
      <div class="container shift-right"> 
      </div> 
     </div> 
    </div> 

    <br /> 

    <div class="row"> 
     <div class="span10 offset1"> 
      <div class="sign-up-agreement"> 
       <small>*By signing up, you are indicating that you have read, understood and agree to our 
        <a id="lpl1" href="#userAgreement" data-toggle="modal">user agreement</a> and 
        <a id="lpl2" href="#privacyPolicy" data-toggle="modal">privacy policy</a>. 
       </small> 
      </div> 
     </div>  
    </div> 

</div> 

彈出的對話框暫時顯示(大約一秒鐘),在它消失之前,它似乎從底部滾動到頂部(我必須這樣做幾次,因爲它發生得很快)。對話框顯示爲從下往上滾動,我看到的最後一件事是帶有標題的對話框標題,然後消失,頁面仍然變暗 - 直到我點擊屏幕。

[編輯]

後使用Firebug進一步調查,我已經縮小的問題是什麼做的JavaScript。我注意到應用於元素的#display#style屬性(很簡單),設置爲block,然後很快(出於某種未知的原因),#display#屬性設置爲none - 這會導致對話框消失。

我手動設置顯示屬性block在螢幕控制檯,彈出對話框出現,並表現正常。所以問題是這樣的:是什麼導致display屬性在大約1秒後重置爲'none'

[[編輯2]]

當我更換file_get_content()函數調用與簡單的文本,如「世界你好」和「你好2」的兩個彈出窗口,它們按預期方式工作(即,正確地)。所以這肯定是與在get_file_content()函數中返回的HTML文本有關的。

任何幫助表示讚賞。

回答

0

最後,我解決了這個問題,將file_get_contents()檢索的內容放入iframe。不知道這是否有更好的方法,但這是我發現的唯一工作。

1

有時候,這是由多次包含jQuery引起的,請確保不是這種情況。

此外,您可以手動更改模式的位置以確保它在屏幕上啓動。你只需要改變利潤率。看看我的教程:change twitter bootstrap position我希望這有助於。

+0

肯定不會包括jQuery不止一次:)感謝您的鏈接,但它會更有幫助它包括標記和CSS。它只是給了CSS,讓我猜測#myModal實際上指的是哪個元素...另外,請參閱我的更新問題(我忘記提及在屏幕上閃爍約1秒後消失)。 –

+0

感謝您的反饋,您在嘗試使用哪種瀏覽器,無論如何,我可以在網上看到它? –

+0

我正在使用FF 16.0.2。不幸的是,我在本地構建(localhost),因此這些頁面不能公開查看。 –

相關問題