javascript在快速开发平台中的应用--弹出消息框

javascript在快速开发平台中的应用--弹出消息框,一段代码进行讲解,涉及知识点:javasecript、layerui、jquery、html等。

先看效果图

快速开发平台提示框

如上所示有一个弹出框,弹出框以后背景变暗(遮蔽层)。效果是怎么实现的呢?

献上源码


@section head{
    <link rel="stylesheet" href="/CSXT/Content/bootstrapValidator.min.css" />
}

@section Scripts{
    @Scripts.Render("~/Scripts/jqueryval")
    <script>
        $("#btn_save").bind("click", function () {
            var params = $("#main-form").serializeJSON();
            var index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            $.post('@Url.Action("ChangePassword")', { objectstring: JSON.stringify(params) }, function (data) {
                if (data.Status>0) {
                    layer.close(index);
                    ShowNotice(data.message, "info");
                }
                else {
                    layer.close(index);
                    ShowNotice(data.message, "danger");
                }

            }, "json");
        });
    </script>

    <script src="/CSXT/Scripts/bootstrapValidator.js"></script>
}


源码内容解释

@section head和@section Scripts请看web框架View层中老鼠洞、母版页是个啥玩意儿,不多解释。请看javasscript里面,点击保存按钮后触发btn_save的点击事件

$("#btn_save").bind("click", function () {
触发事件,组装需要发送的数据
var params = $("#main-form").serializeJSON();

呈现菊花图开发平台,代码如下:


var index = layer.load(1, {
      shade: [0.1, '#fff'] //0.1透明度的白色背景
 });


post提交发送请求给后台,


$.post('@Url.Action("ChangePassword")', { objectstring: JSON.stringify(params) }, function (data) {
快速开发平台后台返回结果
if (data.Status>0) {...}else{...}

关闭菊花,且弹出提示框

layer.close(index);
ShowNotice(data.message, "info");

Over,完结!结果如下:

软件开发平台结果提示框

标签: Web开发框架开发指南红宝书

网站&系统开发技术学习交流群:463167176

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:软件开发框架 » javascript在快速开发平台中的应用--弹出消息框
本文标题:javascript在快速开发平台中的应用--弹出消息框
本文地址:https://www.hocode.com/OrgTec/UI/0037.html

相关文章: 软件开发平台Styles和Scripts打包配置

电话
电话 18718672256

扫一扫
二维码