用JQuery 實現的自定義對話框

2024-09-06 12:42:52

字體：大中小

來源：轉載

供稿：網友

JavaScript為我們提供幾種對話框功能，但功能都十分有限；雖然在IE下可以通過模式窗體的方式創建更豐富的對話框功能，但畢竟只有IE得到支持。為了得到更豐富的自定義對話框功能，于是用JQuery編寫了一個對話框插件；只需簡單地引用相關JavaScript就能得到豐富的自定義對話框功能。
插件功能特點:
       允許通過CSS進行外觀控制。
       可以任意把面頁的元素作為對話框顯示。
       當對話框激活時，對話框外的任何元素不能接受鼠標操作。
       對話框可以在工作區范圍內任意移動，根據工作區大小自適應居中功能。
       并不需要編寫復雜的JavaScript,通過簡單HTML屬性描述即可。
       經過測試插件可以在Firefox和IE下正常工作。
簡單使用描述：
       引用JQuery和對話框插件文件：
       <script src=jquery-latest.js></script>
<script src=messageBox.js></script>
       定義相關按鈕為行：
       <input id="Button4" type="button" value="提問對話框"              showoption="control:test2;width:220;height:120;title:對話框" />
       定義相關對話框顯示的內容:
    <div id="test2" style="display:none">
        <table style="width: 200px">
            <tr>
                <td >
                    JQuery模式對話框插件好用嗎?</td>
            </tr>
            <tr>
                <td align="right" >
                    <input id="Button2" onclick="CloseMessageBox()" type="button" value="是" />
                    <input id="Button6" onclick="CloseMessageBox()" type="button" value="否" /></td>

上一篇：Javascript中的常見排序算法

下一篇：javascript對象的property和prototype是這樣一種關系