前端学习模态框--Dialog

在BJUI前端框架中,可以通过input、button等标签来设置Dialog的跳转链接,通过该链接可以在当前页面生成一个类似于模态框的弹窗。在该弹窗中可以有具体功能,相当于该页面下的子页面。该项功能,对于在当前页面中,需要产生一个子页面来完成相应的功能时具有一定作用。dialog的设置可以再本页面写dialog的页面代码,也可以新建一个html文件作为dialog的页面。为保持页面代码的简洁性,推荐使用新建一个html。

1.设置Dialog链接(试验了a标签和button标签)

//a标签

<a style='line-height:60px' data-title='查看设备详情' data-toggle='dialog' data-id='dialog-mask' data-mask='true' data-width='1000' data-height='850' data-id='viewDevice' class='runningA'  data-url='/admin/dataanalyze/multipleanalyze/viewDailyReport?id=156' >查看</a>

data-title:dialog的名称;

data-toggle:弹窗的类型;

data-mask:dialog出现后,是否需要将父页面隐藏;

data-width:dialog宽度;

data-height:dialog高度;

data-url:dialog的路由;

//button标签

<button style='line-height:1;z-index:-2' id='dialogviewnowtime2' class="btn btn-one resultBtn buttonN" type="button" data-toggle="dialog" data-title='查看设备详情' data-toggle='dialog' data-id='dialog-mask' data-mask='true' data-width='1000' data-height='900' data-id='viewDevice' class='runningA' data-url='/admin/dataanalyze/multipleanalyze/viewnowtime'>实时</button>

2.后台相应设置

在父页面的标签当中的data-url的设置需要在后台有相应的配置。

首先需要在当前页面的文件夹里面新建一个页面,例如上述中的两个页面viewDailyReport和viewnowtime。该页面须与父页面放置于同一个路由下。

其次在新建一个html后,需要在后台写入相应的方法,例如public void viewDailyReport() {keepPara();}以及public void viewnowtime() {keepPara();}。假如后台没有相应方法,则url会自动识别到路由中的上一级路由的index页面中,相应的,此时通过该链接跳转的也是上一级中的index页面。在后台示例语句中的keepPara()语句是jfinal框架中的相应方法,其作用是将父页面中前端通过dialog跳转链接提交的值原封不动的传入到子页面中去。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容