zoukankan      html  css  js  c++  java
  • JS 功能弹框封装

    // 功能提示弹框
    function messageBox ( option ) {
    	var html = '';
    	html += '<div class="message-box-head">' + option.title;
    	html += '<i class="icon iconfont message-close">�</i></div>';
    
    	if ( option.type == 'using' ) {
    		html += '<div class="message-box-body">';
    		html += '<p class="message-prompt">' + option.content + '</p>';
    		html += '</div>';
    	}
    	else if ( option.type == 'disable' ) {
    		html += '<div class="message-box-body">';
    		html += '<p class="message-prompt">' + option.content + '</p>';
    		html += '</div>';
    	}
    	else if ( option.type == 'confirm' ) {
    		html += '<div class="message-box-body reset-pwd">';
    		html += '<p class="message-prompt">' + option.content + '</p>';
    		html += '<div class="message-btn por">';
    		html += '<button class="btn-common btn-gray cancel-btn poa">取消</button>';
    		html += '<button class="btn-common btn-blue yes-btn poa">确定</button>';
    		html += '</div>';
    		html += '</div>';
    	}
    	else if ( option.type == 'confirm2' ) {
    		html += '<div class="message-box-body confirm-spec">';
    		html += '<div class="message-prompt">';
    		html += '<p>'+ option.contentTitle +'</p>';
    		html += '<p>'+ option.content +'</p>';
    		html += '</div>';
    		html += '<div class="message-btn por">';
    		html += '<button class="btn-common btn-gray cancel-btn poa">取消</button>';
    		html += '<button class="btn-common btn-blue yes-btn poa">确定</button>';
    		html += '</div>';
    		html += '</div>';
    	}
    
    	$(".message-box-main").empty().append(html);
    	$(".message-box").addClass('show');
    
    	// 点击取消事件
    	$(".cancel-btn").click(function () {
    		$(".message-box").removeClass('show');
    		if ( option.cancel ) {
    			option.cancel();
    		}
    	});
    
    	// 点击确定事件
    	$(".yes-btn").click(function () {
    		$(".message-box").removeClass('show');
    		if ( option.sureFun ) {
    			option.sureFun();
    		}
    	});
    
    	// 点击图标取消事件
    	$(".message-close").click(function () {
    		$(".message-box").removeClass('show');
    		if ( option.callBack ) {
    			option.callBack();
    		}
    	});
    
    
    }
    

      

      

  • 相关阅读:
    一点关于this的理解
    BFC引发的关于position的思考
    JS HTML标签尺寸距离位置定位计算
    JS获取网页宽高方法集合
    JSDOM之节点
    并发- synchronized,锁
    公共文件下载-结构设计
    订单模块-结构设计
    ES-update
    ES使用笔记
  • 原文地址:https://www.cnblogs.com/zsongs/p/6001194.html
Copyright © 2011-2022 走看看