iziModal使用过程遇到的问题

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

//1.使用方法

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

< link rel = "stylesheet" href = "iziModal.min.css" >

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

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

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

<!-- Trigger to open Modal -->

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

<!-- 模态窗口 -->

< div id = "modal" >

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

</ div > 

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

     event.preventDefault();

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

});  

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

//初始化：

1 2 3 4 5

$( "#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去调就可以了

修改后：

 <li style=“margin-left: 2%;”>项目
   <a style="cursor:pointer;text-decoration:none;"  
 class="trigger"th:text="${project.projectName}" th:href="@{/project/projectDetails(projectId=${project.projectId})}" > 
</a>
</li>