不能得到一个jQuery的移动对话框来显示

我正在使用库1.1。我想获得一个简单的对话框来显示，我不想加载一个页面，我只想显示一个div标签内容来自同一页面。不能得到一个jQuery的移动对话框来显示

我是否需要添加标准1.1引用以外的任何特殊的jquery引用？

可以说我有这个

<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a> 

     <div data-role="dialog" id="dialog"> 
      <div data-role="header" data-theme="e"> 
       <h1>Foo</h1> 
      </div> 
      <div data-role="content" data-theme="e"> 
       <p>Bar</p> 
      </div> 
     </div>

什么我需要做一个页面点击按钮出现对话框时获得？

完整输出HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Plenfy</title> 
<meta name="viewport" content="width=device-width" /> 
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script> 
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
<link href="/Content/mobile/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css"  />

 <img src="/Content/mobile/images/logo-80.png"/> 
<p> 
</p> 
<ul data-role="listview" data-inset="true"> 
<li><a href="/Account/join">Join</a></li> 
<li><a href="/Account/Login">Log In</a></li> 
<li><a href="/contact-us">Contact Us</a></li> 
</ul> 
     </div> 
     <div data-role="page" id="start"> 
      <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a> 
     </div> 
     <div data-role="dialog" id="dialog"> 
      <div data-role="header" data-theme="e"> 
       <h1>Foo</h1> 
      </div> 
      <div data-role="content" data-theme="e"> 
       <p>Bar</p> 
      </div> 
     </div> 
     ? 



    </div> 

</div> 

<script src="/Scripts/mobile/jquery-1.6.4.js" type="text/javascript"></script>

来源

2012-06-26 Diver Dan

所以你希望在显示页面之前首先加载/显示对话框？ –

更新了我的回答：在包含jQuery 1.7.1之后，您必须包含jQuery Mobile JS。在你的html中，你只包括jquery.mobile-1.1.0.css，但缺少jquery.mobile-1.1.0.js。同时在html的末尾删除jQuery 1.6.4的脚本标记。 –

不要忘了，包括jQuery Mobile的（CSS 和JS）和jQuery核心1.6.4 或 1.7.1在jQuery Mobile Docs说明。

，并确保您的页面结构是有效的：

<div data-role="page" id="start"> 
    <a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">Find</a> 
</div> 

<div data-role="dialog" id="dialog"> 
    <div data-role="header" data-theme="e"> 
     <h1>Foo</h1> 
    </div> 
    <div data-role="content" data-theme="e"> 
     <p>Bar</p> 
    </div> 
</div>

根据自己的全功能HTML

Working jsfiddle example

更新：

不要包括jQuery的1.7.1和1.6.4 ，删除jQuery 1.6.4的脚本标记，并包含jQuery Mobile JS包含jQuery 1.7.1之后的。你的包含应该看起来像这样：

<script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script> <script type="text/javascript" src="/Content/mobile/jquery.mobile-1.1.0.js"></script> <link href="/Content/mobile/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css"/>

来源

2012-06-26 13:13:25

有@bas。我认为我的一切都很好，我抄袭了你，仍然没有喜乐。即将更新以更新我的问题与我的实际html –

感谢BAS！终于搞定了 –

不能得到一个jQuery的移动对话框来显示

回答

相关问题