Tham khảo tài liệu 'wordpress jquery - part 24', công nghệ thông tin, đồ họa - thiết kế - flash phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | WordPress and Query s UI Project Adding a dialog box to a download button with icons Dialog boxes are great ways to alert and direct people s attention to really important information making sure they understand the next steps that they need to take as well as confirming an action. Our client is very happy with the tabbed information on the home page and the condensed accordion side bar. They just need one more enhancement. The first tab on the home page offers a PDF download of a white paper that contains information about their methodology products and their various uses. As you can see by the next screenshot the client wants users to understand they re downloading copyrighted information and that the document can not be freely distributed. As you can see in the following screenshot they ve placed some disclaimer language right before the download link to the PDF file 216 Chapter 6 In general that s all their legal department claims they need but they d like it to be a little more clear. We can enhance this download process further by making the download link more prominent using the button widget and turning the previous Disclaimer text into a dialog box. The user will then have to select I Agree on the dialog box to get the PDF download to continue and the client can rest assured that the majority of the people downloading their white paper through a JavaScript-enabled browser are definitely aware of the disclaimer. First let s set up that Disclaimer text to go inside our dialog box. We ll target the paragraph and apply the dialog widget as follows . select p that contains the disclaimer text jQuery post-98 p contains Disclaimer .wrapAll div id disclaimer div create the disclaimer dialog widget jQuery disclaimer .dialog If you reload your page you ll see that the Disclaimer text now appears in a dialog box as follows The dialog box s default is to align the text center . This is great for one line of text but our paragraph looked a little strange so we ve added
