自己整理一個div的jquery彈窗效果
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