CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapmodal-dialog
won
won

Reputation: 79

Why doesn't the modal window open?

I have the following code:

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>

I don't know why this does not work.

I'm sure I wrote it right.

Is there anything I can't catch?

Please tell me your thoughts.

Upvotes: 1

Views: 440

Answers (2)

Subash
Subash

Reputation: 816

Try include the boostrap.js script file, then it would work.

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

Upvotes: 2

SudeepS
SudeepS

Reputation: 29

Instead of using html attribute data-target to open the modal,try using jquery. On click of the link try:-

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

Upvotes: 0

Related Questions