2. 程式人生 > >JQuery實現的彈窗效果

JQuery實現的彈窗效果

阿新 • • 發佈：2019-02-18

這是筆者實際專案中的一個需求，我們先來看看特效。

這裡寫圖片描述

頁面載入時彈出視窗，點選關閉按鈕，視窗消失並呈現動畫效果。
實現程式碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
 
 />
        <title>New Web Project</title>
        <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
        <style type="text/css">
            #infobox{
                position:absolute;
                width:480px;
                height:300px;
                border
 
:#ccc solid 1px;
                z-index: 9999;
            }
            #infobox_header h1{
                height:30px;
                font-size: 18px;
                margin-top:0px;
                line-height: 30px;
                text-align: center;
                background-image:url("image/header_bg.png"
 
);
            }
            #infobox_header h1 #close_btn{
                width: 15px;
                height: 15px;
                border:#ccc solid 1px;
                float: right;
                background-image: url("image/close.png");
                margin-top:5px;
                margin-right:5px;
                cursor: pointer;
            }
            #noticeinfo{
                width:440px;
                height:240px;
                margin-left: auto;
                margin-right:auto;
            }
        </style>
    </head>
    <body>
        <div id="infobox">
            <div id="infobox_header">
                <h1>公告資訊<div id="close_btn">&nbsp;</div></h1>
            </div>
            <div id="noticeinfo">
                <p>重大通知，本行於端午節推出xxxx活動，活動內容xxxx,活動截至日期xxxx-xx-xx。</p>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $("#infobox").hide();
        $(document).ready(function(){

            $("#infobox").slideDown(2000);
        });
        $("#infobox").css({
            "left":($(document).width() - 480) / 2,
            "top":($(document).height() - 300) / 2
        });
        $("#close_btn").click(function(){
            //$("#infobox").fadeOut(2000);
            $("#infobox").hide(2000);
        });

        $(window).resize(function(){
            $("#infobox").css({
            "left":($(document).width() - 480) / 2,
            "top":($(document).height() - 300) / 2
            });
        });
    </script>
</html>

圖片資源可以從原始碼中獲取。

相關推薦

JQuery實現彈窗下底部頁面禁止滑動【轉載】

原文  http://blog.it985.com/22788.html 主題 jQuery 在專案開發過程中，經常會遇到帶有彈窗的頁面，尤其是在移動端。在沒有特別要求的情況下，彈窗彈出後，彈窗下的底部頁面依然能夠滑動。為了得到更好的使用者體驗，需要做到觸發彈窗

html與css實現彈窗效果

彈窗由html、css組成，通過js控制彈窗 html程式碼： <div class="btn_select">//刪除儲存按鈕 <ul> <li>

JQuery實現的彈窗效果

這是筆者實際專案中的一個需求，我們先來看看特效。 頁面載入時彈出視窗，點選關閉按鈕，視窗消失並呈現動畫效果。 實現程式碼如下： <!DOCTYPE HTML PUBLIC "-//W3C

jQuery實戰6:優雅的彈窗效果

彈窗是網頁中經常看到的效果，以前的彈窗是用window.open()等方式在瀏覽器視窗新建另一個新視窗來完成的，這種彈窗方式現在已經被很多瀏覽器所攔截。今天我們來用更加友好的方式來實現彈窗效果。完成的功能效果如圖： 如圖，在瀏覽器的左上方是兩個button按鈕，按下之後分別彈出

CSS實現tost彈窗效果

html: <div class="black-and-white-b"> <div class="hintBox"></div> </div>  css: .bla

android-實現支付寶支付從底部彈窗效果

前言 我們再用支付寶支付的時候,會從底部彈上來一個對話方塊,讓我們選擇支付方式等等,今天我們就來慢慢實現這個功能 效果圖 實現 主介面很簡單,就是一個按鈕,點選後跳到支付詳情的Fragment中 package com.example.hfs.alipayuidemo; impor

JDBC：Servlet返回資訊到頁面，實現Js彈窗效果

//返回資訊，實現頁面彈窗 response.setCharacterEncoding("utf-8"); //防止ajax返回的資料亂碼（有中文的情況下，就必須要寫） response.setCont

自己整理一個div的jquery彈窗效果

js： function letDivCenter(divName) { var top = $(divName).height(); var left = ($(window).width() - $(divName).width(

html+js/jquery實現彈出層效果

在做網頁的時候，彈出層是個很好用的東西，它既可以顯示出我們想要的內容，又無需重新載入，而且彈出層的樣式還可以按我們想要的效果改動，今天就來說一說怎麼做一個彈出層。 首先說一個js的方法。這個方法是以前看到的。 既然是做彈出層，那麼當然得先做幾個div出來，如

實現 iOS 前臺時的推送彈窗效果

或許很多童鞋還不知道，在 iOS 中收到推送通知時，如果 App 處於前臺執行的情況下，推送的頂部彈窗是不會彈出來的。 然而就是有很多**的產品經理都會提出類似這樣的**需求： 那就是在 App 處於前臺時一樣要彈出推送的視窗，而且還要能點選，能跳轉到指定頁面，甚

使用jQuery實現彈出框效果

一，背景 由於在專案中需要用到的一個頁面效果是彈出框，在專案中我使用jquery的ui外掛，來實現這個功能，用法也比較簡單 二，準備環境 1）引入jquery外掛。 在index.html中的頭部加上，以下程式碼 <linkrel="stylesheet"href

js實現簡單彈窗效果

程式碼 <!DOCTYPE html> <html> <head> <title></title> <script src

DIV+CSS實現中間彈窗效果

css程式碼 <style type="text/css" > body{ font-family: "Microsoft YaHei" ! important; } /*灰色遮

JS彈窗效果的實現

第一種: //關閉,父視窗彈出對話方塊,子視窗直接關閉 echo "<script language=javascript>window.close();</script>"; //關閉,父視窗和子視窗都不彈出對話方塊,直接關閉 echo

實現支付寶支付從底部彈窗效果

前言 我們再用支付寶支付的時候,會從底部彈上來一個對話方塊,讓我們選擇支付方式等等,今天我們就來慢慢實現這個功能 效果圖 實現 主介面很簡單,就是一個按鈕,點選後跳到支付詳情的Fragment中 package com.example.

jQuery實現輪播效果(一) - 基礎

時代 例如 自己 -1 fun 時間間隔 order .html 官方 前戲： XXXX年XX月XX日，經理交給我一個站點新聞資訊網頁開發的活兒。我一個java程序猿，怎麽完畢得了網頁設計這樣高端的活兒呢！之前盡管有學過一點HTML。CSS的知識。可

【前端】用jQuery實現瀑布流效果

scrollto title n) 個性 避免 ive gets type turn jQuery實現瀑布流效果 何為瀑布流： 　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加

jquery實現圖片放大效果

jquery實現圖片放大效果好久沒更新了，先來一發關於jquery圖片放大縮小的代碼直接上代碼前端頁面：<tr> <td height="30" align="right" bgcolor="#f2f2f2" class="left_txt2">產品相冊</td>

【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider

pad 語句 borde nbsp strong 調用 define ide right 實現效果： 實現原理： 技術棧: javascript+jQuery+html+css 實現步驟： // 0. 獲取元素 // 1. 鼠標放置到輪播圖上，顯示兩側的

百度地圖 彈窗效果，標註總顯示在左上角

scroll coder 自動 poi level edr local board 放大縮小 現象一： 地圖彈窗先隱藏 ->顯示地圖彈窗->設置marker -> 設置centerAndZoom 　　看效果標註層定點位置有問題（因顯隱），中心點還是相對