jsp悬浮窗，设置动态ID以及javascript：void的注意事项

最新推荐文章于 2021-03-29 11:04:55 发布

Dismay十二

最新推荐文章于 2021-03-29 11:04:55 发布

阅读量1.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_37127253/article/details/102535014

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

这篇博客主要记录此次开发遇到的一些问题，与解决方案。

1.jsp悬浮窗

参考链接

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
        <title>点击文字弹出一个DIV层窗口代码</title> 
        <style> 
        .black_overlay{ 
            display: none; 
            position: absolute; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%; 
            background-color: black; 
            z-index:1001; 
            -moz-opacity: 0.8; 
            opacity:.80; 
            filter: alpha(opacity=88); 
        } 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 25%; 
            width: 55%; 
            height: 55%; 
            padding: 20px; 
            border: 10px solid orange; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
    </style> 
    </head>
    <body> 
        <p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p> 
        
        <div id="light" class="white_content">这是一个层窗口示例程序. 
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></div> 
       
        <div id="fade" class="black_overlay"></div> 
    </body> 
</html>

更改：这里含有动态id，以及href = “javascript:void(0)”

<%--                        根据后台传来的app_number（是一个整数）来设置范围，这里的idNum就会取1.2.3...app_number--%>
<c:forEach begin="1" end="${sessionScope.app_number}" step="1" var="idNum">

                  <div class="section row" >
                      <div class="col-md-6">
                              <label class="field prepend-icon">
                                  <input type="text" required="required" name="war" id="war" class="gui-input"  placeholder="项目镜像">
                                  <label  class="field-icon">
                                      <i class="fa fa-lock"></i>
                                  </label>
                              </label>
                      </div>
                      <div class="col-md-6">
<%--                       id根据变化的idNum而变化'light${idNum}'--%>
                          <p><button  class="panel-footer button" href = "javascript:void(0)" onclick = "document.getElementById('light${idNum}').style.display='block';document.getElementById('fade${idNum}').style.display='block'">依赖服务选择</button></p>

                          <div id="light${idNum}"  class="white_content">
                              <div id="fade${idNum}" class="black_overlay" >

                              <table id="message-table" class="table admin-form theme-warning tc-checkbox-1" >
                                  <thead>
                                  <tr class="">

                                      <th class="hidden-xs">编号</th>
                                      <th class="hidden-xs">服务名</th>
                                      <th class="hidden-xs">选择</th>

                                  </tr>
                                  </thead>
                                  <tbody>
                                  <c:forEach items="${list}" var="emp">
                                      <tr class="message-unread">

                                          <td>${emp.sn}</td>
                                          <td>${emp.name}</td>
                                         <td><input type="checkbox" id="${emp.sn}"></td>

                                      </tr>
                                  </c:forEach>
                                  </tbody>
                              </table>
                              
      <%--                   这里可以看见我写了一个js，这里注意一定a上一定不要保留href = "javascript:void(0)"，否则你的js将无法调用--%>
                              <a  onclick = "dependencyServiceSure(${idNum})">
                                  <input type="button" style="float:right"  value="确定"/></a></div>

                     



                      </div>
                  </div>
   </c:forEach>

单独说明

href = “javascript:void(0)” 不能与js函数同时存在，否则js函数不会生效例如：<a href = "javascript:void(0)" onclick = "dependencyServiceSure(${idNum})">
这样将无法调用dependencyServiceSure()函数。
动态id

<div id="light${变化量}" >

这里顺道附上js

function dependencyServiceSure(id) {
	document.getElementById('light'+id).style.display='none';
	document.getElementById('fade'+id).style.display='none';
	
}

Dismay十二

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jsp悬浮窗，设置动态ID以及javascript：void的注意事项

前言这篇博客主要记录此次开发遇到的一些问题，与解决方案。1.jsp悬浮窗参考链接<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> ...
复制链接

扫一扫

专栏目录