模态对话框

课后整理 2021-2-25

下面设计右侧产品的购物车功能。当用户选择购买该产品时,表明要把产品放入购物车,这一步只需要将用户选择产品的名称、尺寸、颜色、数量和总价告诉用户,以便用户进行确认,是否选择正确。

【操作步骤】

第1步,新建JavaScript文档,保存为finish.js,然后输入下面代码:

/*最终购买输出*/
$(function(){
    var $product = $(".jnProDetail");
	$("#cart a").click(function (e) {        
		var pro_name = $product.find("h4:first").text();
		var pro_size = $product.find(".pro_size strong").text();
		var pro_color =  $(".color_change strong").text();
		var pro_num = $product.find("#num_sort").val();
	    var pro_price = $product.find(".pro_price strong").text();
		var dialog = "感谢您的购买。<div style='font-size:12px;font-weight:400;'>您购买的产品是:"+pro_name+";"+
				"尺寸是:"+pro_size+";"+
				"颜色是:"+pro_color+";"+
				"数量是:"+pro_num+";"+
				"总价是:"+pro_price +"元。";
		$("#jnDialogContent").html(dialog);
		$('#basic-dialog-ok').modal();
		return false;//避免页面跳转
	});
})

第2步,应用该特效,则演示效果如图1所示。

图1 放入购物车提示效果

【提示】

在本例中使用了一个简单的模态对话框插件SimpleModal,SimpleModal是一个轻量级的jQuery插件,它为模态窗口的开发提供了一个强有力的接口,可以把它当作模态窗口的框架。

SimpleModal非常的灵活,可以创建能够想像到的任何东西,并且还不需要考虑UI开发中的跨浏览器相关问题。

jQuery SimpleModal插件的下载地址为:http://www.ericmmartin.com/projects/simplemodal/

从官方下载插件,在文件中引用

<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>

使用方法具体可以从官方网站下载带例子的压缩包,很容易上手。

$("#element-id").modal();//引入内容块 
$.modal("<div><h1>SimpleModal</h1></div>"); //直接添加html代码 
$("#element-id").modal({options}); 
$.modal("<div><h1>SimpleModal</h1></div>", {options}); //带自定义选项的使用 

SimpleModal自定义选项说明如下所示: