在Dreamweaver​中如何为设计对话框？

设计对话框

【操作步骤】

第1步，启动Dreamweaver CC,新建HTML5文档。选择“文件” | “新建”命令，打开“新建文档”对话框，在该对话框中选择“启动器模板”选项，设置“示例文件夹”为“Mobile起始页”，“示例页”为“jQuery Mobile (本地）”，设置“文档类型”为HTML5,然后单击“确定”按钮，完成文档的创建操作。

第2步，按Ctrt+S快捷键，保存文档为index.html。此时，Dreamweaver CC会弹出对话框提示

第3步，在编辑窗口中，拖选2~4个视图框架，然后按Delete键删除。

第4步，切换到代码视图，修改标题、链接信息和脚注文本，设置<a>标签为外部链接，地址为dialog.html,并添加data-rel=”dialog”属性声明，定义打开模态对话框，详细设置如图所示。

第5步，另存index.html为dialog.html,保持HTML5文档基本结构基础上，定义一个单页视图 结构，设计模态对话框视图。定义标题文本为“主题”，内容信息为“简单对话框！”，如图所示

第6步，在移动设备中预览该首页，单击“打开对话框” 链接，即可显示模态対话框。该对话框以模式的方式浮在当前页的上 面，背景深色，四周是圆角的效果，左上角自带一个关闭按钮，单击该按钮，将关闭对话框。