modal模态框触发弹出/弹窗各种实现教程

进云

1、电脑端智能生成（筛选数据列表页）modal模态框弹窗，只需'type'=>'modal'。后面的op是动作页面

案例代码：

1. array('type'=>'modal','op'=>'biaoqian','title'=>'聊天记录'),
2. if($_RQ['op']=='biaoqian'){
3. $id=intval($_RQ['id']);
4. if($id){
5. $item=pdo_get('core_kefu_fans',array('uniacid'=>$_SESSION['uniacid'],'id'=>$id));
6. }else{
7. $item=array();
8. }
9. $return['item']=$item;
10. $htmls=array(
11. 'type'=>'edit',
12. 'desc'=>'备注详情',
13. 'edit'=>array(
14. array('type'=>'string','title'=>'标签','name'=>'biaoqian', 'help'=>'' ),
15. array('type'=>'string','title'=>'姓名','name'=>'realname', 'help'=>'' ),
16. array('type'=>'string','title'=>'电话','name'=>'phone', 'help'=>'' ),
17. )
18. );
19. $return['htmls']=$htmls;
20. exi($return);
21. }

复制代码

2、电脑端智能生成（详情页面）模态框弹窗实现：
案例代码（参考文件：manage/actions/system/site.php）：

1. array(
2. 'type'=>'array',
3. 'name'=>'hdps',
4. 'add_tip'=>'添加一个幻灯片',
5. 'list'=>array(
6. array('type'=>'image','name'=>'picurl','title'=>'幻灯片图片'),
7. array('type'=>'string','name'=>'url','title'=>'幻灯片链接'),
8. ),
9. 'details'=>array(
10. array('type'=>'image','name'=>'picurl','title'=>'幻灯片图片','help'=>''),
11. array('type'=>'string','name'=>'url','title'=>'幻灯片链接'),
12. )
13. ),

复制代码

3、任何页面，点击弹出模态框方法：

ng-click里面是传参给弹窗界面，data-toggle="modal"表示模态框，data-target="#followewm"，表示弹窗ID=followewm的DIV层！

1. ng-click="pagedata.title=item.title;pagedata.ewm=item.ewm" data-toggle="modal" data-target="#followewm"
2. <div id="followewm"  class="modal fade" tabindex="-1" style="z-index:99999;display:none;">
3. <div class="modal-dialog" style="margin-bottom:216px">
4. <div class="wap-qrcode-container">
5. <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
6. <p class="example1">{{pagedata.title || '没有命名'}}</p>
7. <div class="wap-qrcode-image">
8. <img ng-src="{{tomedia(pagedata.ewm) || '../core/resource/images/nopic.jpg'}}"/>
9. </div>
10. <p class="example1">长按二维码关注</p>
11. </div>
12. </div>
13. </div>

复制代码

云小米

很实用