1. 程式人生 > >自己整理一個div的jquery彈窗效果

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

js:
 function letDivCenter(divName)
    {
        var top = $(divName).height();
        var left = ($(window).width() - $(divName).width()) * 482 / 1000;
        var scrollTop = $(document).scrollTop();
        var scrollLeft = $(document).scrollLeft();
        $(divName).css({
            position: 'absolute',
            top: top+scrollTop,
            left: left+scrollLeft
        }).show(700);
    }
function show_or_hide_pop_div(msg,type){
  var _pop=$("#pop_div");
  var _msg=$("#err_msg_span");
  if(type=="show"){
    letDivCenter(_pop);
    if(_pop.hasClass("dis-n")){
      _pop.removeClass("dis-n");
      _msg.html(msg);
    }
  }
  else{
    
    if(!_pop.hasClass("dis-n")){
      _pop.removeAttr("style");
      _pop.addClass("dis-n");
     
    }
  }
}

div:

   <div id="pop_div" class="pop-pos-pay h-180 dis-n">
    <div class="pop-con-pay-fff h-160">
        <a href=""><i class="pop-close"></i></a>
        <!--第一行15字最多--><p class="f-16"><i class="b-tan-icon"></i><span id="err_msg_span">是否確定?</span></p>
        <p class="mar-l-90 f-16"> </p>
        <p class=" text-c mar-t-10"> <input type="button" id="confirm" value="確定" class=" pop-pos-pay-btn"  /><input type="button" value="取消" id="cancel" class="pop-pos-pay-btn mar-l-30" onclick="show_or_hide_pop_div('','hide')" /></p>
    </div>
</div>

引用;

顯示: show_or_hide_pop_div("確定!","show");

隱藏: show_or_hide_pop_div("","hide");


//彈窗確定按鈕事件
$("#confirm").click(function(){    
    show_or_hide_pop_div('','hide');
});

可結合使用:

$.post('',{},function(data){
if(true){

 show_or_hide_pop_div("確定!","show");

$("#confirm").click(function(){    
    show_or_hide_pop_div('','hide');
});
}
})


css:(不一定全部都有用,先存著)
.pop-pos{ width:386px; height:163px; border-radius:8px; background:rgba(0,0,0,0.5); -ms-background-color:rgb(0,0,0); -ms-filter:alpha(opacity=50);margin:200px auto;}
.pop-con{ width:366px; height:143px; background:#f4f4f4; margin:10px 0 0 10px; position:absolute;}
.h-105{ height:105px;}
.bor-bottom-1{ border-bottom:1px #d0cfcf solid; background:#fff;}
.pop-clo{ font-size:14px; color:#999; padding-left:10px; line-height:36px;}
.pop-title{ color:#116397; font-weight:600; font-size:16px;}
.pop-icon,.pop-icon-2,.pop-icon-collection1,.pop-icon-collection2{ width:44px; height:44px; display:block; margin-left:35px; float:left; }
.pop-icon{ background:url(images/icon.png) no-repeat -58px -99px;}
.pop-icon-collection1{ background:url(images/icon.png) no-repeat -280px -99px; margin-left:58px;}
.pop-icon-collection2{ background:url(images/icon.png) no-repeat -326px -99px; margin-left:58px;}
.l-22{ line-height:22px;}
.l-40{ line-height:40px;}
.padding-10{ padding:10px 10px 10px 14px;}

.pop-text{ width:260px; display:block; margin-left:90px; font-size:16px;}
.pop-pos-pay{ width:386px; height:222px;border-radius:8px; background:rgba(0,0,0,0.5); -ms-background-color:rgb(0,0,0); -ms-filter:alpha(opacity=50);margin:200px auto;  z-index:1002;
overflow: auto;}
.pop-con-pay{ width:366px; height:202px; background:#f4f4f4; margin:10px 0 0 10px; position:absolute;}
.pop-con-pay-fff{ width:366px; height:202px; background:#fff; margin:10px 0 0 10px; position:absolute;}
.b-tan-icon{ width:44px; height:44px; display:inline-block; background:url(images/icon.png) no-repeat -106px -99px; margin-bottom:-16px; margin-left:36px; margin-top:35px; margin-right:10px; }
.pop-pos-pay-btn{ padding:5px 20px; background:#bd1f2e; color:#fff; border:medium none; border-radius:6px; cursor:pointer;}
.pop-close{   float: right;width: 20px;height: 20px;display: block;background: url(images/icon.png) no-repeat -157px -64px; margin: 5px;}

.pop-position{ position:relative;}
.send-pop-1{ width:400px; height:300px; border:1px #aaa solid; margin:150px auto ; padding:25px;}
.send-pop-2{ width:550px;  border:1px #aaa solid; margin:150px auto ; padding:25px;}
.padding-1-5{ padding:1px 5px;}
.w-350{ width:350px;}
.send-pop-text{ margin-top:10px; border:1px #aaa solid; margin-right:10px;}
.send-pop-btn{ color:#fff; background:#bd1f2e; padding:3px 35px; cursor:pointer; border:medium none; border-radius:5px;}
.w-80{ width:80px;}
.pop-clo-icon{ width:26px; height:26px; display:inline-block; background:url(icon.png) no-repeat -212px -65px; margin-bottom:-7px;margin-left:8px;}
.mar--20{margin:-20px;}
.w-100{ width:100px;}
.w-315{ width:315px;}
.l-icon{  border-left:1px #aaa solid; margin-top:11px; padding-bottom:14px;}
.d-weizhi{ float:left; margin-top:-20px; display:inline-block;}
.mar-l--5{ margin-left:-5px;}
.mar-l-1{ margin-left:1px;}
.send-pop-area{ width:520px; height:160px; margin:20px auto;}
.send-pop-area-btn{color:#fff; background:#bd1f2e; padding:3px 19px; cursor:pointer; border:medium none; border-radius:4px; font-size:16px;}
.send-pop-image{width:900px;  border:1px #aaa solid; margin:50px auto ; height:800px; padding:8px 0;}
.pad-td-10{ padding:10px 0;}
.h-180{ height:180px;}
.h-160{ height:160px;}
.mar-l-90{ margin-left:90px;}

圖片:


引用;

顯示: show_or_hide_pop_div("確定!","show");

隱藏: show_or_hide_pop_div("","hide");

相關推薦

自己整理一個div的jquery效果

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

百度地圖 效果,標註總顯示在左上角

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

頁面效果 帶有確認取消按鈕 類似 confrim效果

auto fff document 沒有 color cti -c confirm eat 上代碼 先寫js 建立各個元素到頁面上 這裏面對應的三個參數是 內容和兩個按鈕內的內容 newconfrim ("彈窗內容","取消","完成") /*

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

html與css實現效果

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

iOS Toast封裝 基於SVProgressHUD 兩分鐘封裝很好用的安卓版Toast 效果封裝

先看效果 基於SV的好處 例如網路載入需要用SV顯示載入資訊,但是載入成功如果是其他toast還需要呼叫SV的dismiss然後才能顯示toast 這裡直接顯示toast即可方便,SV底層是用的

JDBC:Servlet返回資訊到頁面,實現Js效果

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

Android類似QQ效果

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

實現 iOS 前臺時的推送效果

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

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實現的效果

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

自己封裝的vue外掛

<template> <transition name='fade'> <div class="alert"> <div class="

JavaScript封裝自己一個,是雙按鈕的,比較簡單一些 ,其中引用了jQuery來寫的方法,最後暴露出去,有更好的建議歡迎評論 。。。。

$(function(){ // 設定自執行函式 (function(jQuery){ // 定義建構函式 var Popup = function (title,text,fn) { this.title = title || '

用vue2.x註冊一個全局的alert組件

lsa ext one eight ref over 回調函數 pos leave 一、在實際的開發當中,彈窗是少不了的,默認系統的彈窗樣式太醜,難以滿足項目的實際需求,所以需要自己定義彈窗組件,把彈窗組價定義為全局的,這樣減少每次使用的時候引入麻煩,節省開發時間。本文將分

mui中同一個頁面按物理返回鍵只關閉,不返回上一個頁面

若一個頁面中存在彈窗,在彈窗開啟的狀態下,點選物理返回鍵只要求關閉當前彈窗,而不是返回上一頁面,再次點選物理鍵時才會返回上一頁面,有以下解決方法。 step1:進入頁面時先禁用物理返回鍵,此時還能監聽到返回鍵,只是不執行返回 mui.init({ beforeback:func