ionic中自定义底部弹出框

通用部分:
<script>
     MY_FUNCTION = (function() {
        var upSheet = document.createElement(‘div‘);
        upSheet.setAttribute(‘style‘, ‘display:none;position:absolute;left:0px;top:0px;z-index: 9999;‘);
        upSheet.style.width = document.documentElement.clientWidth + ‘px‘;
        upSheet.style.height = document.documentElement.clientHeight + ‘px‘;

var sheet = document.createElement(‘div‘);
        sheet.setAttribute(‘style‘, ‘display:block;width:100%;min-height:0px;position:absolute;left:0px;bottom:0px;z-index:10000;‘);
        upSheet.appendChild(sheet);
        document.body.appendChild(upSheet);
       return {
         scope : null,
         showUpSheet : function(o) {
           this.scope = o.scope;
           this.item=o.item;        
           sheet.innerHTML = o.template;
           upSheet.style.display = ‘block‘;
         },
         hideUpSheet : function() {
           sheet.innerHTML = ‘‘;
           upSheet.style.display = ‘none‘;
         }
       };
    })();
  </script>

调用部分:
$scope.showUpSheet = function() {
      MY_FUNCTION.showUpSheet({
        template: document.getElementById(‘templates/sheet.html‘).innerHTML
      });
    }

html部分:
<script id="templates/sheet.html" type="text/html">
  <div class="tabs-tanchu">
    11111111111
  </div>
</script>

时间: 2024-10-08 12:53:17

ionic中自定义底部弹出框的相关文章

bootstrap中popover.js(弹出框)使用总结+案例

bootstrap中popover.js(弹出框)使用总结+案例 *bootstrap官方说明:http://v3.bootcss.com/javascript/#popovers 一. popover常用配置参数: 1 //常用配置参数: 2 $(document).ready(function() { 3 $('#temp').popover( 4 { 5 trigger:'click', //触发方式 6 template: '', //你自定义的模板 7 title:"标题",

UIActionSheet底部弹出框

<底部弹出框来提示用户信息>    1.遵循代理方法<UIActionSheetDelete>    2.调用放法 [UIActionSheet *sheet=[UIActionSheet alloc]initWithTitle:@“通关了!” delegate:self cancelButtonTitle:@“取消” destructiveButtonTitle:@“购买” otherButtonTitles:@“购买1”,@“购买2”,nil]    [sheet showIn

通用的popupwindow底部弹出框

前段时间做项目的时候,有几个底部弹出框,当时因为忙着赶进度所有就单独写了好几个popupwindow.后来就想着怎么实现一个通用的PopupWindow工具类 就是在要用到的时候创建该工具类的对象,并传入相应的框体布局,就可以实现了. 先看看效果,下面的两是调用同一个PopupWindowUtils创建的:       ok,先看看popupWindow的具体实现 import android.app.Activity; import android.graphics.drawable.Colo

自定义的弹出框列表适配器,类似于大众点评或美团

无意下载一个代码, 还不错,记录一下,说不定以后会用到.效果图如下 整体工程是引入了一个library,当然完全可以写到一个工程里面,如下截图 代码还是很好理解的, 下面贴出来,顺便又加了一些注释 1.MainActivity.java public class MainActivity extends ActionBarActivity { private PopupButton btn; private PopupButton btn2; private LayoutInflater inf

自定义PobUpwindow弹出框

在做分享这一块的时候,用到弹出框的功能,还必须得有点击返回键,同样可以撤销显示的弹出框,于是自己就动手写了一个,一切看代码: public class ShareBoardPicker implements OnClickListener { private Context mContext; private SharePobupWindow mPopupWindow;//分享框 private LinearLayout layout; private RelativeLayout mWeixi

selenium自动化实施中对windows弹出框的几种常见处理方案

一.概述 在使用自动化框架selenium实施中,经常会遇到windows弹出框的出现,刚入门的web自动化测试小伙伴不要慌哦! 二.几种常见的处理windows弹出框的方案 2.1 Selenium 处理安全对话框 (windows security dialog)用autoit 来代替 2.1.1 安装autoit-v3-setup.exe 2.1.2 将AutoitX3.dll和jcob.1.18-M2-x86.dll放到C:\windows\System32路径下:如果是64位系统,需把

自定义PopupWindow弹出框(带有动画)

使用PopupWindow来实现弹出框,并且带有动画效果 首先自定义PopupWindow 1 public class LostPopupWindow extends PopupWindow { 2 public Lost lost; 3 public void onLost(Lost lost){ 4 this.lost = lost; 5 } 6 private View conentView; 7 8 public View getConentView() { 9 return cone

自定义popup弹出框

ys_popup.css .ys-popup{     position:fixed;     top:0;     bottom:0;     left:0;     right:0;     display:none;     z-index: 99999;     background-color: rgba(0,0,0,0.4); } .ys-popup .ys-popup-content{     position:absolute;     left:30px;     right:

iOS自定义提示弹出框(类似UIAlertView)

菜鸟一枚,大神勿喷.自己在牛刀小试的时候,发现系统的UIAlertView有点不喜欢,然后就自己自定义了一个UIAlertView,基本上实现了系统的UIAlertView,可以根据项目的需求修改UIAlertView的颜色.欢迎大神多多指导.不胜感激! 效果图: Paste_Image.png --------------直接贴代码---------不喜勿喷----------大神多多指导.不胜感激!------- #import <UIKit/UIKit.h> typedef void(^