iziModal.js的隐藏功能,点不同的链接,展示不同的页面

1,点不同的链接,展示不同的页面;

先建立A标签:

<a href="http://www.baidu.com" class="trigger" title="百度">打开百度</a></br>
<a href="http://www.163.com" class="trigger" title="网易">打开网易</a></br>
<a href="http://www.qq.com" class="trigger" title="某讯">打开某讯</a></br>
<div id="demo" style="display: none;"></div>

这三个A标签,我们定义了同一个class名trigger,和各自不同的属性与显示文本;

DIV标签是为了展示模态框的,要使用iziModal,我们需要引入它需要的资源;

引入js与css

<link href="https://cdn.bootcss.com/izimodal/1.5.1/css/iziModal.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/izimodal/1.5.1/js/iziModal.js"></script>

引入的iziModal.js是未压缩版的,是分析时用的,如果不想分析代码,可以使用压缩版的 !

下面,我们来初始化iziModel;

//初始化
$("#demo").iziModal({
	title:'demo',//不传这个初始化后,是没有标题的
	iframe: true,
	iframeHeight: '90vh',
	width:'90vw'
});

关键代码:

$(document).on('click', '.trigger', function (event) {
		event.preventDefault();
		$("#demo").data().iziModal.options.iframeURL=this.getAttribute('href');
		// $("#demo .iziModal-header-title").html(this.innerText);
		$("#demo .iziModal-header-title").html(this.getAttribute('title'));
                //展示模态框
		$('#demo').iziModal('open',this);
});