iziModal使用过程遇到的问题

iziModal是一款时尚炫酷的jquery模态窗口插件。该模态窗口插件提供基本的打开模态窗口动画特效，并且可以调用iframe内容，Ajax加载，制作alert效果，加载超大内容等。

//1.使用方法

//在页面中引入iziModal.min.css和jquery、iziModal.min.js文件。

<linkrel="stylesheet"href="iziModal.min.css">

<scriptsrc="jquery.min.js"type="text/javascript"></script>

<scriptsrc="iziModal.min.js"type="text/javascript"></script> 

//2.可以通过按钮或<a>元素来触发一个模态窗口。

<!--
Trigger to open Modal -->

<ahref="https://www.baidu.com"class="trigger">打开模态窗口</a>

<!--
模态窗口 -->

<divid="modal">

    <!--
模态窗口的内容 -->

</div> 

$(document).on('click','.trigger',function(event)
{ 
//通过.trigger触发

    event.preventDefault();

    $('#modal').iziModal('open',event);//
注意上面传下来的是event事件，不要写成this

});

//要在模态窗口中使用iframe功能，结构如下：

//初始化：

$("#modal").iziModal({

title : '你的标题',
iconClass : 'icon-settings_system_daydream',
transitionIn : 'transitionIn',

transitionOut : 'transitionOut',
headerColor : '#fff',
theme : 'light',
width : 1000,
iframeHeight: 550,
overlayClose : true,
iframe : true

});

Opening：在模态窗口打开时触发。

1

2

3

$(document).on('opening','#modal',function(e) {

//console.log('Modal is opening');

});
Opened：在模态窗口打开之后触发。

1

2

3

$(document).on('opened','#modal',function(e) {

//console.log('Modal is opened');

});
Closing：在模态窗口关闭时触发。

1

2

3

$(document).on('closing','#modal',function(e) {

//console.log('Modal is closing');

});
Closed：在模态窗口关闭之后触发。

1

2

3

$(document).on('closed','#modal',function(e) {

// console.log('Modal is closed');

});

以下是我用这个插件遇到的问题

<li style=“margin-left: 2%;”>项目 <a style="cursor:pointer;text-decoration:none;" class="trigger" th:href="@{/project/projectDetails(projectId=${project.projectId})}" > <span th:text="${project.projectName}"></span> </a> </li> //标签里的变量记得改自己的

这样我一直打不开模态框，找了挺久，调试才知道，因为我的a标签里加了span标签，加了span标签之后通过class得到的targer是span,

所以模态框打不开，后来将span去调就可以了

修改后：