在Dreamweaver?中如何為設計對話框？

設計對話框

【操作步驟】

第1步，啟動Dreamweaver CC,新建HTML5文檔。選擇“文件” | “新建”命令，打開“新建文檔”對話框，在該對話框中選擇“啟動器模板”選項，設置“示例文件夾”為“Mobile起始頁”，“示例頁”為“jQuery Mobile (本地）”，設置“文檔類型”為HTML5,然后單擊“確定”按鈕，完成文檔的創(chuàng)建操作。

第2步，按Ctrt+S快捷鍵，保存文檔為index.html。此時，Dreamweaver CC會彈出對話框提示

第3步，在編輯窗口中，拖選2~4個視圖框架，然后按Delete鍵刪除。

第4步，切換到代碼視圖，修改標題、鏈接信息和腳注文本，設置<a>標簽為外部鏈接，地址為dialog.html,并添加data-rel=”dialog”屬性聲明，定義打開模態(tài)對話框，詳細設置如圖所示。

第5步，另存index.html為dialog.html,保持HTML5文檔基本結構基礎上，定義一個單頁視圖 結構，設計模態(tài)對話框視圖。定義標題文本為“主題”，內(nèi)容信息為“簡單對話框！”，如圖所示

第6步，在移動設備中預覽該首頁，單擊“打開對話框” 鏈接，即可顯示模態(tài)対話框。該對話框以模式的方式浮在當前頁的上 面，背景深色，四周是圓角的效果，左上角自帶一個關閉按鈕，單擊該按鈕，將關閉對話框。