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();
    		}
    	});
    
    
    }
    

      

      

  • 相关阅读:
    linux下ssh端口的修改和登录
    linux找回密码
    XAMPP命令之LAMPP
    VirtualBox 复制vdi文件和修改vdi的uuid
    探讨PHP页面跳转几种实现技巧
    CSS盒模型和margin重叠
    8--数组旋转
    9--斐波那契数列
    7--动态规划
    6--树的遍历
  • 原文地址:https://www.cnblogs.com/zsongs/p/6001194.html
Copyright © 2011-2022 走看看