正文 

当前位置： 首页 > java > java教程

自定义弹出框效果

黑白kn 黑白kn     2022-09-01     384

关键词：

对网站而言，弹出框是比较常见的。或是给出用户操作提示，或是通过弹出框打开一个小窗口以提示信息，或是给出错误警示等等。

但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调，且不同浏览器有不同的默认样式设置。

所以在日常工作中，给网站做一个自定义的弹出框十分必要。特别是富交互的网站

 

一、提示框

html部分：

 1 <!--修改弹窗-->
 2 <div class="pop-alert" id="pop" style="display:none">
 3     <div class="btbox"><a href="javascript:Func.popHide(‘#pop‘)" class="gb">x</a></div>
 4     <div class="cont clearfix">
 5         <p class="jx_inf">这是一个提示</p>
 6     </div>
 7     <div class="an_box">
 8         <a href="javascript:Func.popHide(‘#pop‘)" class="btn-comm-small btn-comm-white btn">确 认</a>
 9     </div>
10 </div>

css部分：定义基本样式

 1  .pop-alert{width:353px; height:205px;border: 1px solid #d6d8d9;background: #f3f5f7;position:fixed;top:50%;left:50%;margin:-220px 0 0 -370px;outline:none;display:none;z-index:999;}
 2  .pop-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);z-index:998;}
 3  .btbox{ height:40px;}
 4  .btbox sp{font-size: 1.4em;font-weight: bold;color: #fff;line-height: 40px;margin-left: 10px;}
 5  .gb{ width:24px; height:24px; display:inline; margin:5px 5px 0 0; color: #909091;text-align: center;position: absolute;top: 0;right: 0;}
 6  .gb:hover{ background-position:0 -24px;}
 7  .cont{ padding-top:22px; text-align:center;}
 8  .cont img,.cont p{ display:inline-block; margin:0 8px; vertical-align:top;}
 9  .cont p{ text-align:left;color:#999;min-height: 80px;}
10  .jx_inf{line-height:20px; font-size:14px;text-align: center;}
11  .jx_inf span{ color:#00fb76;}
12  .an_box{ text-align:center; height:32px;}
13  .an_box a{width:100px; height:32px;  display:inline-block;font-weight:bold;background:#3898fe;color:#fff; text-align:center; line-height:32px; font-size:14px;border-radius:4px;}
14  .an_box a:hover{ background-color:  #58a9ff;}

js部分： 生成行内样式 

        popShow:function(popBox) {
            var p=$(popBox);
            p.show();
            p.css({
                position: ‘fixed‘,
                top: ($(window).height() - p.height()) / 2,
                left: ($(window).width() - p.width()) / 2,
                marginTop:0,
                marginLeft:0,
                zIndex: 1005
            });
            $(‘.pop-bg‘).show();
            $(‘<span class="pop-bg"></span>‘).appendTo("body");
        },
        popHide:function(popBox) {
            $(popBox).hide();
            $(‘.pop-bg‘).remove();
        },

如上所示：css方面,关键的是 1、position:fixed样式，2、然后在定义 top和left 3、z-index的遮罩层的生成  

　　　　　 js方面 就是控制 弹出框的显示和隐藏

 

mui自定义从底部弹出的弹出框

1）效果： 点击“点击就送”那个按钮之后，弹窗从底部弹出并自带蒙层，然后点击弹窗之外的灰色部分就从底部消失： 第一步：引入mui.css或者mui.min.css       引入 mui.min.js或者mui.js ... 查看详情

蒙版弹出框效果

自定义package cn.lxsdb.yyd.app.dialog;    import cn.lxsdb.yyd.app.R;  import cn.lxsdb.yyd.app.constants.AppIntent;  import android.app.Dialog;& 查看详情

从弹出框/弹出框中定义的数据填充自定义 tableView 单元格中的字段

】从弹出框/弹出框中定义的数据填充自定义tableView单元格中的字段【英文标题】：PopulatingfieldsinacustomtableViewcellfromdatadefinedinapopover/popup【发布时间】：2021-08-2300:08:33【问题描述】：在我的应用程序的设置VC中，我有一个带有5个... 查看详情

ionic2：如何自定义弹出框宽度？

】ionic2：如何自定义弹出框宽度？【英文标题】：ionic2:howtocustomizepopoverwidth?【发布时间】：2018-02-1519:55:45【问题描述】：我正在使用Ionic2：我使用了一个弹出框，我想自定义每个弹出框的大小。这是弹出框：我想减少它的宽度... 查看详情

带有弹出框的自定义选择，打开时更改颜色

】带有弹出框的自定义选择，打开时更改颜色【英文标题】：customselectwithpopover,changecolorwhenopen【发布时间】：2018-06-1401:40:27【问题描述】：我创建了一个带有div和ngbPopover的自定义选择。我坚持在弹出框打开时如何设置“选择div... 查看详情

自定义弹出框背景问题

】自定义弹出框背景问题【英文标题】：CustomPopoverBackgroundIssue【发布时间】：2013-01-2415:46:49【问题描述】：我制作了一个弹出框，其中包含带有一些背景的分段tableView。我想删除那条细的垂直边界线，它存在于两个部分之间的... 查看详情

reactnativemodal自定义弹出框

...用来覆盖包含reactnative根视图的原生视图。应用场景：自定义弹出框reactnative提供的Alert组件，局限性比较大，无法进行自定义，幸好还有Modal可以来进行自定义开发。效果图如下：（一）常见属性：animationType：enum('none','... 查看详情

自定义弹出框警报视图

】自定义弹出框警报视图【英文标题】：CustomisePopOverAlertView【发布时间】：2012-09-0605:54:08【问题描述】：我们可以编辑PopOverAlert....是否可以自定义UIAlertView。我也想让UIAlertView透明。【问题讨论】：您究竟需要哪种类型的警报视... 查看详情

在自定义弹出框控制器中使用 UIReferenceLibraryViewController

】在自定义弹出框控制器中使用UIReferenceLibraryViewController【英文标题】：usingUIReferenceLibraryViewControllerincustompopovercontroller【发布时间】：2014-02-0822:29:48【问题描述】：我正在为iPhone使用自定义弹出框控制器(WYPopoverController)并在其... 查看详情

向弹出框的 uibarbuttonitem 添加自定义视图

】向弹出框的uibarbuttonitem添加自定义视图【英文标题】：addingacustomviewtouibarbuttonitemofapopover【发布时间】：2012-03-1909:21:42【问题描述】：在阅读了苹果的示例：MultipleDetailViews演示了如何将UIPopOverController与两个详细视图控制器一... 查看详情

在 iPad 上使用自定义背景图像创建 UIKit 弹出框

】在iPad上使用自定义背景图像创建UIKit弹出框【英文标题】：CreatingaUIKitpopoveroniPadwithcustombackgroundimages【发布时间】：2012-09-0623:17:20【问题描述】：我有一个iPad应用程序，它将使用自定义图稿显示一个弹出框。从较早的问题（Cus... 查看详情

在我的自定义按钮中打开 Airplay 弹出框

】在我的自定义按钮中打开Airplay弹出框【英文标题】：OpenAirplaypopoverinmycustombutton【发布时间】：2013-01-1418:25:46【问题描述】：我想知道是否可以创建自定义播放按钮并将其添加到工具栏？即我想创建打开与原始AirPlay按钮相同的... 查看详情

为 iPhone 创建一个自定义弹出框——我要继承啥类？

】为iPhone创建一个自定义弹出框——我要继承啥类？【英文标题】：CreatingacustompopoverforiPhone-whatclassdoIsubclass?为iPhone创建一个自定义弹出框——我要继承什么类？【发布时间】：2013-03-2816:54:02【问题描述】：我在这里看到了这个... 查看详情

iPad/iPhone 的自定义弹出框

】iPad/iPhone的自定义弹出框【英文标题】：CustompopoverforiPad/iPhone【发布时间】：2010-10-1318:26:43【问题描述】：在iBooks应用程序中，亮度、字体和搜索视图是UIPopOverController的子类，但没有边框。有什么方法可以模仿这些观点吗？【... 查看详情

swing自定义jdialog弹出框

第一次搞swing，自定义JDialog的例子较少，写下来备忘，对JDialog中的文本框进行了验证packagecom.chauvet;importjava.awt.Component;importjava.awt.Dimension;importjava.awt.Toolkit;importjava.awt.event.ActionEvent;importjava.awt.event.Acti 查看详情

自定义一个在鼠标移入弹窗时不消失的基于bootstrap的popover

参考技术A通过data属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加data-toggle="popover"即可。锚的title即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。<ahref="#"data-toggle="popover"title=... 查看详情

自定义popup弹出框

ys_popup.css.ys-popup{    position:fixed;    top:0;    bottom:0;    left:0;    right:0;  & 查看详情

如何使用情节提要从自定义 uitableviewcell 正确启动弹出框转场

】如何使用情节提要从自定义uitableviewcell正确启动弹出框转场【英文标题】：Howtocorrectlystartapopoverseguefromacustomuitableviewcellusingthestoryboard【发布时间】：2015-03-2915:52:15【问题描述】：那么，当打开它的按钮位于表格视图中的自定... 查看详情