为什么模态窗口没有打开?

时间:2017-12-22 08:59:36

标签: javascript jquery twitter-bootstrap modal-dialog

我有以下代码:

adminMainPage.jsp

<c:forEach items="${memberList}" var="mList">
  <a style="color:black;" class="showMemberInfo" data-toggle="modal" data-id="${mList.id}" data-name="${mList.name}" data-birth="${mList.birth}" 
                     data-phone_1="${mList.phone_1}" data-phone_2="${mList.phone_2}" data-phone_3="${mList.phone_3}" data-email="${mList.email}" data-target="#memberInfo">${mList.id}</a>
</c:forEach>

<jsp:include page="showMemberModal.jsp" />

adminMainPage.js:

   $(document).ready(function()
   {
      $('.showMemberInfo').click(function()
      {
         $('#mid').val($(this).data('id'));
         $('#mname').val($(this).data('name'));
         $('#mbirth').val($(this).data('birth'));
         $('#mphone_1').val($(this).data('phone_1'));
         $('#mphone_2').val($(this).data('phone_2'));
         $('#mphone_3').val($(this).data('phone_3'));
         $('#memail').val($(this).data('email'));
      });
   });

modal.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="css/showMemberModal.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<div class="modal fade" id="memberInfo">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">x</button>
            <h4 class="modal-title title">회원정보</h4>         
         </div>
         <div class="modal-body" style="padding-bottom: 40px">
            .....
         </div>
      </div>
   </div>
   <!-- <input type="hidden" id="mid" value=""> -->
   <input type="hidden" id="mname" value="">
   <input type="hidden" id="mphone_1" value="">
   <input type="hidden" id="mphone_2" value="">
   <input type="hidden" id="mphone_3" value="">
   <input type="hidden" id="memail" value="">
</div>

我不知道为什么这不起作用。

我确定我写得对。

有什么我听不到的吗?

请告诉我你的想法。

2 个答案:

答案 0 :(得分:2)

尝试包含boostrap.js脚本文件,然后就可以了。

<script src="js/bootstrap.min.js"></script>

答案 1 :(得分:0)

不使用html属性data-target打开模态,而是尝试使用jquery。点击链接尝试: -

$('#memberInfo').modal('show');