JQueryMobile彈出式菜單樣式不正確

我想使用jQuery Mobile顯示彈出式菜單，但是彈出式菜單有問題。的HTML標記看起來是這樣的：JQueryMobile彈出式菜單樣式不正確

<div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all"> 
     <div data-role="header" data-theme="a" class="ui-corner-top"> 
      <h1>Delete Page?</h1> 
     </div> 
     <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
      <h3 class="ui-title">Are you sure you want to delete this page?</h3> 
      <p>This action cannot be undone.</p> 
      <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>  
      <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a> 
     </div> 
    </div>

（順便說一句，這個代碼是從jQuery Mobile的網站複製）。

當我使用.popup（'open'）方法打開彈出窗口時，標題（刪除頁面？）和按鈕不是樣式的。標題顯示爲常規文本，並且按鈕顯示爲常規鏈接。

什麼會導致此行爲？

謝謝！

來源

2013-01-15 ml123

您的HTML中可能有錯誤。

下面是你的代碼工作的例子：http://jsfiddle.net/Gajotres/EtDZc/

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
      <a href="#second" class="ui-btn-right">Next</a> 
     </div> 

     <div data-role="content"> 
      <a href="#" data-role="button" id="test-button">Test popup</a> 
      <div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all"> 
       <div data-role="header" data-theme="a" class="ui-corner-top"> 
        <h1>Delete Page?</h1> 
       </div> 
       <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
        <h3 class="ui-title">Are you sure you want to delete this page?</h3> 
        <p>This action cannot be undone.</p> 
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>  
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a> 
       </div> 
      </div> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div> 
</body> 
</html>

這一個：

$('#index').live('pagebeforeshow',function(e,data){  
    $('#test-button').live('click', function(e) { 
     $('#confirmDialog').popup('open'); 
    });  
});

與jQuery 1.9或更高版本，您必須使用在功能工作時，現場已被棄用，不再存在。

$(document).on('pagebeforeshow','#index',function(e,data){  
    $(document).on('click', '#test-button',function(e) { 
     $('#confirmDialog').popup('open'); 
    });  
});

您也可能正在使用文檔準備事件綁定。它不應該與jQuery Mobile一起使用，而應該使用page events。

來源

2013-01-15 21:07:27 Gajotres

那麼，你的代碼給了我需要的提示......問題在於我的彈出窗口不在「內容」div內。謝謝！ – ml123

我認爲你的問題是在標題之前定義popup ID。您可以在主體部分和內容之前定義它。然後在內容部分，您可以定義調用按鈕並將其設置爲彈出調用。

來源

2016-03-18 19:25:37 negin51

JQueryMobile彈出式菜單樣式不正確

回答

相關問題