Javascript href和引导模式

我试图用一个应用程序实现一个模态功能，但我有点卡住了

用例：在用户的仪表板上，它们是各种应用程序的一堆链接。当用户尝试访问这些链接时，将弹出一个带有条款和条件的模式，当用户接受该条件时，将根据用户选择的应用程序链接打开一个新窗口。这些链接是动态的，在基于数据库的UI上生成

非模式实施：

<div class="col-xs-12" nopadding>
    <ul class="nopadding padded-side-20">
        <c:forEach var="app" items="${appAndLink}">
            <li><a href="#" onClick="openJSWindow('${app.value}', '${app.key}', true)">${app.key}</a></li>
        </c:forEach>                                                                
    </ul>
</div>

<c:forEach var="app" items="${appAndLink}">
    <li><a href="#" id="modalbutton" data-toggle="modal" data-height=320 data-width=450 data-target="#myModalAccessApp">${app.key}</a></li>
</c:forEach>
<div class="modal fade" id="myModalAccessApp" tabindex="-1" role="dialog" aria-labelledby="myModalAccessAppLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header nopadding padded-side-20 padded-tb-10">
                <button type="button" class="close" 
                data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalAccessAppLabel">
                    Systems Use Notification
                </h4>
            </div>
            <div class="row">
                <div class="col-lg-12 gray-divider"></div>
            </div>
            <div class="modal-body" id ="modalID">
                <p> Terms and condition </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="openJSWindow('${app.value}', '${app.key}', true)" data-dismiss="modal">
                    I Accept
                </button>
                <button type="button" class="btn btn-success" 
                data-dismiss="modal">Cancel
                </button>
            </div><!-- /.modal-footer -->
        </div>
    </div>
</div> <!-- /.modal-Ends --> 

</ul>
</div>  

模式实施：

<div class="col-xs-12" nopadding>
    <ul class="nopadding padded-side-20">
        <c:forEach var="app" items="${appAndLink}">
            <li><a href="#" onClick="openJSWindow('${app.value}', '${app.key}', true)">${app.key}</a></li>
        </c:forEach>                                                                
    </ul>
</div>

<c:forEach var="app" items="${appAndLink}">
    <li><a href="#" id="modalbutton" data-toggle="modal" data-height=320 data-width=450 data-target="#myModalAccessApp">${app.key}</a></li>
</c:forEach>
<div class="modal fade" id="myModalAccessApp" tabindex="-1" role="dialog" aria-labelledby="myModalAccessAppLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header nopadding padded-side-20 padded-tb-10">
                <button type="button" class="close" 
                data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalAccessAppLabel">
                    Systems Use Notification
                </h4>
            </div>
            <div class="row">
                <div class="col-lg-12 gray-divider"></div>
            </div>
            <div class="modal-body" id ="modalID">
                <p> Terms and condition </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="openJSWindow('${app.value}', '${app.key}', true)" data-dismiss="modal">
                    I Accept
                </button>
                <button type="button" class="btn btn-success" 
                data-dismiss="modal">Cancel
                </button>
            </div><!-- /.modal-footer -->
        </div>
    </div>
</div> <!-- /.modal-Ends --> 

</ul>
</div>  

&时代；
系统使用通知
条款和条件

我接受
取消

我无法将

${app.value}

，

${app.key}

值传递给我创建的模式。请告诉我这是否可以用jQuery或AJAX实现。我对这些方面的知识非常有限

---

谢谢你的帮助

使用

data-*

属性和

relatedTarget

技术：谢谢phillip100，我刚刚做到了这一点