最近一直忙於對公司原先專案的改造，在改造主頁面時遇到一個問題，原先主頁面是frameset標籤，其中有個頁面有使用者登入和修改密碼對話方塊，原先頁面處理比較粗糙，想換成Jquery UI中的dialog外掛。但是彈出對話方塊無法覆蓋整個frameset框架，只能覆蓋使用者登入按鈕所在頁面。於是上網搜尋了以下找到了一些解決方案，但都不符合當前遇到的情況，有一個解決方案提出新建一個html頁面並將frameset所在的頁面作為iframe的子節點放到裡面。我將這個方法稍微變通了一下，將使用者登入和修改密碼按鈕所在頁面放到和iframe同一頁面中，那麼彈出對話方塊不就可以覆蓋整個frameset框架了，具體程式碼如下

<div id="dialog-weblog">
        <form action="">
        <fieldset>
            <label for="username">
                使用者名稱:<em class="required">必填</em></label>
            <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all"
                title="請輸入使用者名稱" />
            <label for="password">
                密碼:<em class="required">必填</em></label>
            <input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all"
                title="請輸入密碼" />
        </fieldset>
        </form>
        <em class="validateTips"></em>
    </div>
    <div class="top">
        <img alt="" src="cycommon/images/logo.jpg" />
    </div>
    <div class="menuBar">
        <a href="helppage.html" target="index_right">
            <img alt="系統幫助" src="images/top/but_help.gif" id="sysHelp" /></a>
        <img alt="修改密碼" src="images/top/but_repassword.gif" id="modifyPwd" />
        <img alt="使用者登入" src="images/top/but_logo.gif" id="userLogo" />
    </div>
    
        <iframe id="mainframe" src="struct.html" width="100%" marginwidth="0" scrolling="no"
            frameborder="0"></iframe>
    
 

<div id="dialog-weblog">
        <form action="">
        <fieldset>
            <label for="username">
                使用者名稱:<em class="required">必填</em></label>
            <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all"
                title="請輸入使用者名稱" />
            <label for="password">
                密碼:<em class="required">必填</em></label>
            <input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all"
                title="請輸入密碼" />
        </fieldset>
        </form>
        <em class="validateTips"></em>
    </div>
    <div class="top">
        <img alt="" src="cycommon/images/logo.jpg" />
    </div>
    <div class="menuBar">
        <a href="helppage.html" target="index_right">
            <img alt="系統幫助" src="images/top/but_help.gif" id="sysHelp" /></a>
        <img alt="修改密碼" src="images/top/but_repassword.gif" id="modifyPwd" />
        <img alt="使用者登入" src="images/top/but_logo.gif" id="userLogo" />
    </div>
    <div>
        <iframe id="mainframe" src="struct.html" width="100%" marginwidth="0" scrolling="no"
            frameborder="0"></iframe>
    </div>