4.4 整人游戏：我不是弱智！
笔者以前经常被QQ控件或各种论坛上的某个标题所吸引，打开之后却发现网页中弹出一个对话框，必须不断地点击烦人的按钮无数次才能关闭这个页面。当时也曾经在网上搜索过相应的教程，可惜一直都没有成功。时隔多年，笔者又想起了当年的“悲惨经历”，于是决定在这里与读者分享下面的例子。
在Sublime中编辑4个文件，分别为index.html、question.html、confirm.html、result.html。下面给出具体代码。
提示
因为安全问题，本例需要在服务器上测试（否则会因为跨域问题提示错误），使用Apache测试，这可能对读者有点难度，如果读者还不会使用服务器，可在全书学习完成后再回头演示本例。
【范例4-5 游戏的开始页面index.html】
【范例4-6 询问读者是否是弱智的页面question.html】
【范例4-7 另一个询问页面confirm.html】
【范例4-8 游戏结束页面result.html】
运行后的结果如图4-6~图4-9所示。
首先单击“开始游戏”按钮，就会看到页面中有文字询问用户是否承认自己是弱智，若是愿意承认自己是弱智，则可以转到图4-9所示的页面，游戏结束，否则一直循环。
图4-6 游戏开始图
4-7 对话框提问用户
图4-8 反复提问
图4-9 最后结果
各位聪明而又细心的读者想必已经发现，本节使用的链接代码中又加入了一个新的属性data-rel="dialog"。这句代码是干什么用的呢？看上去并没有产生特殊效果。
首先dialog就是jQuery Mobile已经给用户定义好了对话框控件，使用它可以实现一些与一般页面不同的交互效果，读者可以自己尝试。当运行到图4-9所示的游戏结束页面时，点击手机上的返回键，会发现页面返回到了图4-6所示的界面。然后去掉data-rel="dialog"，再看效果会发现，点击返回键后会完整地重复图4-7以及图4-8所示的界面。
读者可以想象，这跟我们在PC上浏览网页时的返回按钮非常相似，由于浏览器会使用哈希来记录已经访问过的页面，从而使其在返回时能够记录已经访问过的页面。而对于以对话框形式打开的页面，则不记录其哈希值，浏览器将不会对这些页面进行记录。
当然，有一部分人会通过“返回”的方式来重复答题以获得虚假的高分。如果在这里使用对话框控件，就能比较容易地解决这一难题。
提示
为了加快页面的加载速度，可以尝试将多个page放在同一个页面中，这种方法将会在后面的章节中进行介绍。