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功能，结构如下： 

//初始化：

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>