点击按钮弹出模态框的一系列操作代码实例_javascript技巧_脚本之家

提交按钮功能:点击提交按钮的时候都会弹出模态框,但是有不同的状态:审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮审核状态已通过:如果新增医院的经纬度没有填写,会提示填写经纬度,填写之后点击提交按钮,模态框中显示确定和取消按钮审核状态待审核:模态框中显示确定和取消按钮

BootStrip简介

添加医院的html代码:

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。

  所属医院   @if($data->hospitalid > 0) **如果医院的id>0,就是存在对应的医院,让下面的输入框不能修改**  @else **如果医院的id<=0,就是不存在对应的医院,让下面的输入框可以修改,同时填写医院的经纬度**      @endif  

点击按钮弹出模态框的一系列操作代码实例_javascript技巧_脚本之家。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web
开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob
Thornton合作开发,是一个CSS/HTML框架。

审核状态的相关html代码:

Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC的Breaking
News都使用了该项目。
国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

 审核状态  is_verify == 1) disabled @endif name="is_verify" data="{{$data->is_verify}}" style="width:100px;position:relative"> is_verify == 1) selected @endif>未通过 is_verify == 2) selected @endif>已通过 is_verify == 0) selected @endif>待审核   **如果未通过审核的话会弹出这个input输入框,填写未通过理由**  

1.1. 帮助文档关键字

总的表单提交按钮html代码:

boostrap模态框oaoDailog

  提交**这个提交按钮的功能与上面的审核状态和添加医院相关信息有关系**点击提交按钮的时候,弹出模态框,此时的模态框有两种状态:1. 返回  

金沙8331网址,1.2. 使用场景

模态框的相应html代码:

当网页上点击某个按钮需要给予用户提示确认,用户点击确认按钮才能继续执行,或者用户点击取消按钮则取消执行操作;

    × 确认提交吗?  {{----}} {{----}}  取消 确定  确定并保存医院    

var hospitalId = {{$data->hospitalid}}; **拿到对应医院的id****下面是点击提交按钮时的处理函数**$.click { is_verify = $('select[name=is_verify]').val(); **拿到审核状态下拉框的值** if  { **未通过的时候** if (!$('input[name=check_reason]').val { layer.msg; **如果选择未通过的时候,后面的未通过理由没有填写,值为空,弹出提示信息请填写未通过理由** return false; } } if  { **如果医院不存在的话** if  { //审核未通过 $.show() **模态框中新增确定并保存医院的按钮出现** } else if { //审核通过 if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val { layer.msg; **所属医院下面的经纬度有一个没填写都会弹出提示信息** return false; } $.hide() **模态框中新增确定并保存医院的按钮消失** } else { **这个else中的条件就是 : 待审核中** $.hide() **模态框中新增确定并保存医院的按钮消失** } } $.modal; **只要点击提交按钮模态框就会显示** });

${ $(":input[name=is_verify]").on{ **审核状态的下拉列表发生变化的时候触发这个函数** console.log,$; if == 1){ layer.msg('已通过审批用户不可继续审批',{time:1000},function ; $; return false; } else { if  { **如果审核状态是未通过,显示输入未通过理由的input输入框** $; } else { $; } } }); });

function save{ **触发模态框中新增确定并保存医院的按钮的函数** **save_hospital 是要传递的参数** data = $.serializeArray() **得到提交表单中的所有数据** if  { **如果要传递的参数已经存在** if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val { layer.msg; **如果经纬度有一个没填写就弹出这个信息** return false; } data.push({name:'save_hospital',value:1}); **将这个医院保存到数据中** } $.ajax({ type: 'POST', url : "{{url}}/"+{{$data->id}}, dataType: 'json', data: data, success: function{ if{ layer.msg; setTimeout{//两秒后跳转 window.location.href = data.url; },1000); }else{ alert; } }, error:function{ if  { var json=JSON.parse; json = json.errors; for  { for ( var i = 0; i < json[item].length; i++) { layer.msg(json[item][i],{time:1000}); return ; //遇到验证错误,就退出 } } } else { layer.msg('服务器连接失败',{time:1000}); } return ; } }); return false; function success { if  { alert; } else { window.location.href = data.url; } }; }

当网页上点击查看,展示的数据需要使用弹出框展示的情况下,可以使用oaoDailog

以上所述是小编给大家介绍的js弹出模态框方法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

1.3. 原理图

基于boostrap3.0的modal,jquery1.9

1.4. 使用说明

为什么需要oaoDailog?

a.由于boostrap3.0提供的modal,必须要在页面上先定义一个modal的div隐藏代码,用户将需要展示的内容写到该div中,如果一个页面有多种模态框,则需要写多个隐藏的模态框div隐藏代码,无疑这是多余的。

b.由于默认的modal是没有确认和取消按钮的,当然我们可以写两个button在模态框的隐藏div中,但是我们同时需要写js去监控确认按钮点击后执行的操作,同时确认按钮执行的操作,跟弹出时用户点击的数据有关系,数据如何传递,bootstrap没有给我们提供。

c.
oaoDailog1.0.0版本主要就是解决bootstrap的模态框使用不方便,代码冗余的问题。

1、 引入oaoDailog.js

2、 调用展示弹出框的代码

oao.dialog({title:"删除提示框",content:"请确认是否真的删除,删除后将无法恢复!",ok:function;}});

这就是一个基本也是使用最常见的确认弹出框的使用方法。

1.5. API

oao.dialog():这个方法是生成弹出框的方法,传入的参数是一个json对象,当然你也可以什么都不传,那样会弹出一个空白的弹出框,这是没有问题的。下面分别介绍每个参数的意思以及默认值。

弹出框的主要内容,可以是文本和html代码

Function/boolean

Function/boolean

•oao.dialog.close():关闭模态框

1.6. 待支持的功能 1.目前弹出框的内容只支持文字和静态html,不支持url请求

2.目前最多只能显示两个按钮,不支持自定义按钮,后续支持

3.目前弹出框的位置和大小不支持自定义

4.目前的弹出框一次只能弹出一个,不支持弹出框中再弹出一个模态框

敬请期待,下个版本见。

/*!* oaoDialog 1.0.0* author:xufei* Date: 2015-7-9 1:32* http://www.oaoera.com* Copyright © 2014 www.oaoera.com Inc. All Rights Reserved. 沪ICP备13024515号-1 上海义信电子商务有限公司 ** This is licensed under the GNU LGPL, version 2.1 or later.* For details, see: http://creativecommons.org/licenses/LGPL/2.1/*///oao命名空间oao = {};oao.init = function{var defaultSettings ={title : "提示",content:"",okVal:"确认",cancalVal:"取消",ok:function.modal;},cancel:function.modal;},close:false}oao.settings = $.extend({}, defaultSettings, settings || {});return oao.settings;}oao.initContent = function(){var modelHtml = ""+" "+" "+" "+" ×"+" "+" "+" "+" "+" "+" "+" "+" "+" "+" "+" ";var $modelHtml = $;$(".modalOK",$modelHtml).text;$(".modalCancel",$modelHtml).text(oao.settings.cancalVal);$(".modal-title",$modelHtml).text;$(".modal-body",$modelHtml).html;if{$(".modalOK",$modelHtml).remove();}if{$(".modalCancel",$modelHtml).remove.append;}//弹出对话框的方法oao.dialog = function{settings = oao.init;oao.initContent();//关闭的时候调用方法$.on('hidden.bs.modal', function  {if{oao.settings.close.removeif{$.click;}if{$("#oaoModal .modalCancel").click;}$.modal.css({"margin-top": function .height;;}//关闭对话框的方法oao.dialog.close = function.modal;}

发表评论

电子邮件地址不会被公开。 必填项已用*标注