请在Chrome、Firefox等现代浏览器浏览本站。另外提供付费解决DEDE主题修改定制等技术服务,如果需要请 点击 加我 QQ 说你的需求。

织梦自定义表单ajax提交及弹窗提示框样式修改美化

二次开发 路人编辑部

织梦自定义表单ajax提交及弹窗提示框样式修改美化【实测:此方法可用】 第一步:我们先对织梦自定义表单进行ajax改造, 将form元素的属性action、enctype、method去掉,添加id=form,form元素就变为 form id=form 提交按钮增加 onclick=add_ajax() 并把 type

织梦自定义表单ajax提交及弹窗提示框样式修改美化【实测:此方法可用】
第一步:我们先对织梦自定义表单进行ajax改造,
 
将form元素的属性action、enctype、method去掉,添加id="form",form元素就变为<form id="form">
 
提交按钮增加 onclick="add_ajax()" 并把 type="submit" 修改为 type="button"
例如:<input type="button" value="提 交" onclick="add_ajax()" />

引入jquery库,点击【这里】引用
 
把ajax代码放在页面最底部(不能放在jquery库之前)
<script type="text/javascript">function add_ajax(){
    $.ajax({
        type: "POST",
        url: "/plus/diy.php",//提交到后台文件
        data: $('#form').serialize(),//表单传值
        success: function(data) {
            alert(data);//弹窗显示PHP返回的值,如不需要显示,注释掉这行即可            
            $('#form')[0].reset();//提交后清除表单填写的值
        }
    });
    return false;
    }
</script>

到这里ajax提交后台就完成了!简单粗暴!
 
然而实际应用会发现,提示框与预期的不一样了!
 
下面我们接着来改造。
 
引用下面的css样式
.win { display: none; }
.mask-layer { position: fixed; width: 100%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); background-color: black; z-index: 99998; top: 0px; left: 0px; }
.window-panel { position: fixed; z-index: 99999; top: 50%; left: 50%; background-color: white; border-radius: 4px; }
.window-panel .title-panel { position: absolute; height: 36px; width: 100%; border-radius: 4px 4px 0 0; }
.window-panel .title { position: absolute; height: 36px; width: 100%; text-align: center; border-radius: 4px 4px 0 0; line-height: 36px; vertical-align: middle; background-color: whitesmoke; /*标题背景色*/ border-bottom: 1px solid rgb(233, 233, 233); z-index: 1; }
.window-panel h3 { font-size: 16px; margin: 0; }
.window-panel .close-btn { display: block; text-align: center; vertical-align: middle; position: absolute; width: 36px; height: 36px; line-height: 36px; right: 0px; text-decoration: none; font-size: 24px; color: black; background-color: #DBDBDB; border-radius: 2px; z-index: 1; }
.window-panel .close-btn:hover { background-color: #ccc; }
.window-panel .body-panel { position: absolute; width: 100%; top: 36px; border-radius: 0 0 4px 4px; z-index: 1; }
.window-panel .content, .window-panel .btns { text-align: center; }
.window-panel .content { padding: 18px 5px 0px 5px; font-size: 16px; min-height: 40px; line-height: 22px; }
.window-panel .w-btn { display: inline-block; width: 60px; height: 26px; line-height: 26px; background-color: #DE5923; color: white; cursor: pointer; text-align: center; border-radius: 2px; text-decoration: none; margin: 0 10px 0px 10px; border: none; }
.window-panel .w-btn:hover { background-color: #DA3E00; }
.window-panel .w-btn:focus { outline: 0 none; }


接着在引用如下JS(放在jq之后)
var win = new function () {
    // 确认框和提示框宽度
    this.width = 300;
 
    // 确认框和提示框高度
    this.height = 172;
 
    // 手动关闭窗体
    this.close = function () {
        $('.win iframe').remove();
        $('.win').remove();
    };
 
    // 打开窗体
    this.open = function (width, height, title, url, closed) {
        this._close = function () {
            this.close();
            if ($.isFunction(closed)) closed();
        };
 
        var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close();" class="close-btn" title="关闭">×</a><iframe class="body-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto" src=""></iframe></div></div>';
        var jq = $(html);
        jq.find(".window-panel").height(height).width(width).css("margin-left", -width / 2).css("margin-top", -height / 2);
        jq.find(".title").find(":header").html(title);
        jq.find(".body-panel").height(height - 36).attr("src", url);
        jq.appendTo('body').fadeIn();
        $(".win .window-panel").focus();
    };
 
    // 显示消息框
    function messageBox(html, title, message) {
        win.close();
        var jq = $(html);
 
        jq.find(".window-panel").height(win.height).width(win.width).css("margin-left", -win.width / 2).css("margin-top", -win.height / 2);
        jq.find(".title-panel").height(win.height);
        jq.find(".title").find(":header").html(title);
        jq.find(".body-panel").height(win.height - 36);
        jq.find(".content").html(message.replace('\r\n', '<br/>'));
        jq.appendTo('body').show();
        $(".win .w-btn:first").focus();
    }
 
    // 确认框
    this.confirm = function (title, message, selected) {
        this._close = function (r) {
            this.close();
            if ($.isFunction(selected)) selected(r);
        };
 
        var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close(false);" class="close-btn" title="关闭">×</a><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="win._close(true);">确定</button><button class="w-btn" onclick="win._close(false);">取消</button></p></div></div></div>';
        messageBox(html, title, message);
    };
 
    // 提示框
    this.alert = function (title, message, closed) {
        this._close = function () {
            this.close();
            if ($.isFunction(closed)) closed();
        };
 
        var html = '<div class="win"><div class="mask-layer"></div><div class="window-panel"><iframe class="title-panel" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe><div class="title"><h3></h3></div><a href="javascript:void(0)" onclick="win._close();" class="close-btn" title="关闭">×</a><div class="body-panel"><p class="content"></p><p class="btns"><button class="w-btn" tabindex="1" onclick="win._close();">确定</button></p></div></div></div>';
        messageBox(html, title, message);
    }
 
    // 提示框
    this.alertEx = function (message) {
        this.alert('系统提示', message);
    }
};


然后我们在第一步中的第四条的ajax代码稍微改动下
function add_ajax(){
    $.ajax({
        type: "POST",
        url: "/plus/diy.php",//提交到后台文件
        data: $('#form').serialize(),//表单传值
        success: function(data) {
            win.alert('系统提示', data);//弹窗显示PHP返回的值
            $('#form')[0].reset();//提交后清除表单填写的值
        }
    });
    return false;
}


最终效果如图

织梦教程弹窗提示框

到了这边以上方法已完成。以下是在小编测试时候出现的情况,表单提交成功并没有出现弹窗,只有在出现错误的时候才会出现弹窗。

经过小编测试,需结合<织梦提示信息改弹窗提示并跳转后停留在当前页面的方法>该文章的方法一起使用。

只需把第一步增加的PHP
/**
    *_alert_back() 弹窗
    *@access public  表示函数对外公开
    *@return float 表示返回出来一个浮点数字
    */
      
function _alert_back($_info,$_url){
  echo "<script type='text/javascript'>alert('$_info');window.location.href='$_url';</script>";
}

中的alert('$_info');window.location.href='$_url';删除即可。

提交表单成功后出现弹窗,最终效果如图,请自行修改弹窗中的内容及样式。

织梦教程弹窗提示框美化



转载请注明本文地址:http://www.sanjiaohl.com/dedejc/rckf/37.html | 网站建设|织梦教程|手机建站教程