单击子div时隐藏父模式

时间：2016-08-23 09:44:25

标签： javascript jquery html

我有一个tr onclick，我有一个模态。还有一个按钮是tr中的一个列，其中我有另一个模态开口。但是当我点击按钮时，两个模态都打开了。我想隐藏父模态。我用过modal。（hide）哪个不起作用

enter image description here 

    $(document).ready(function(e){
$(".roundButton").click(function(e){
$('#caseModal').modal('hide');
 
});
 $(".ticketTable").delegate("tr.rows", "click", function(){
    var p=$(this).position();
    var t=p.top+10;
     $(".contentModal").css("top",t,"important");
});


        });
#dropDownNote{
	background-color: white;
	color: black;
	border-color: black;
	width: 45%;
}
.dropdown-menu{
	position: relative!important;
	border-radius: 0px;
	float:none !important;
	width: 45%;
    margin-left: 27.5%;
}
.modal-header{
	background-color: #4378B8;
	color: white;
	font-weight: 10%;
}
.contentModal{
	border-radius: 0px;
	background-color: #adc4e1;
	height: 125px;
}
#type,#commentForm{
	text-align: left;
	margin-left: 27.5%;
}
#cancelLink{
	margin-right: 10px;
	text-decoration:underline;
}
.modal-footer{
	border-top:none;
}
.modal-footer-content{
	width: 63%
}
#comment{
	width: 62%;
	border-color: black;
}
.table tr{
	cursor: pointer;
}
#caseModal table td{
	text-align: left;
	width: 70%;
}

#tlist{
	text-align:center;
}
.roundButtonList{
	border-radius: 25px;
   border-width: 0.1px;
    border-color: #3b3b3b;
    float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ticket List</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
  
  
</head>
  <body>
<!--Modal Start-->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">ADD NOTE OR ESCALATE TICKETS</h4>
            </div>
            <div class="modal-body">
                <p>Fill in the information below and submit your note</p>
                <br>
                <div id="modal-body-content">
                <p id="type">Select type of note</p>
                <div class="dropdown">
  					<button id="dropDownNote" class="btn btn-primary dropdown" type="button"  data-toggle="dropdown">Add Note 
  						<span class="caret"></span></button>
 							<ul class="dropdown-menu">
    							<li><a href="#">Escalate Tier 1</a></li>
   								<li><a href="#">Escalate Tier 2</a></li>
   								
  							</ul>
				</div>
				<br>
				<div id="commentForm" class="form-group">
  					<p>Add Comments</p>
  					<textarea class="form-control" rows="4" id="comment"></textarea>
				</div>
				</div>
            </div>
            <div class="modal-footer">
            <div class="modal-footer-content">
            	<a id="cancelLink" data-toggle="tab" href="#" data-dismiss="modal">CANCEL</a>
                <button type="button" class="btn btn-primary">SUBMIT</button>
            </div>
            </div>
        </div>
    </div>
</div>
<!--Modal End-->
<!--Case Modal Start-->
<div id="caseModal" class="modal fade">
    <div class="modal-dialog listModalDialog modal-lg">
        <div class="modal-content contentModal">
  					<div class="col-lg-6">
            <table id="tlist">
  <tr>
    <th>Service/Device</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Service 12345</td>
    <td>Critical</td>
  </tr>
  <tr>
    <td>Service 12345</td>
    <td>Critical</td>
  </tr>
  <tr>
    <td>Device 12345</td>
    <td>Critical</td>
  </tr>
</table>
         </div>
         <div  class="col-lg-6"><button type="button" class="roundButtonList">View Location Details</button></div>
        </div>
    </div>
</div>
<!--Case Modal End-->
<div>
<ul class="nav nav-tabs">
     <li class="active"><a class="tabsInactive" data-toggle="tab" href="#home">OPEN TICKETS</a></li>
  <li ><a class="tabsInactive" data-toggle="tab" href="#menu1">CLOSED TICKETS</a></li>
  <li ><a class="tabsInactive" data-toggle="tab" href="#menu2">ALL TICKETS</a></li>
    </ul>
  </div>
<br>
<div>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-filter"></span>
    </button>No Filter Selected
    <span class="download">
   <u>Download</u>
   <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-download-alt"></span>
   </button>
   </span>
</div>
<br>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
  <div class="table-responsive">
  <table class="table table-hover ticketTable">
    <thead>
      <tr>
        <th>Ticket ID</th>
        <th>Cust Loc ID</th>
    
        </tr>
    </thead>
    <tbody>
      <tr id="tkt1" class="clickable-row rows" data-href="#" data-toggle="modal" data-target="#caseModal">
        <td>12321443-Open</td>
        <td>ABC-12321443</td>
        <td>Technical Tickets</td>
        <td>Remote Ticket</td>
        <td>Open-Dispatch</td>
        <td>Critical</td>
        <td>Cable</td>
        <td><div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="70"
                aria-valuemin="0" aria-valuemax="100" style="width:70%">
               </div>
            </div>
        </td>
        <td>0.5</td>
        <td> <button type="button" class="roundButton" data-toggle="modal" data-target="#myModal">Add Note/Escalate</button></td>
       </tr>
      <tr id="tkt2" class="clickable-row rows" data-href="#" data-toggle="modal" data-target="#caseModal">
        <td>12321444-Open</td>
        <td>ABC-12321444</td>
        <td>Technical Tickets</td>
        <td>Remote Ticket</td>
        <td>Open-PAM Case</td>
        <td>Critical</td>
        <td>Fiber</td>
        <td>
          <div class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="70"
                aria-valuemin="0" aria-valuemax="100" style="width:60%">
                </div>
            </div>
        </td>
        <td>1.5</td>
        <td> <button type="button" class="roundButton" data-toggle="modal" data-target="#myModal">Add Note/Escalate</button></td>
      </tr>
    </tbody>
  </table>
  </div>
    </div>
  </div>
</div>
</div>
</body>

1 个答案:

答案 0 :(得分：0)

你应该使用event.stopPropagation（）来阻止事件冒泡。

将您的按钮点击事件更改为此

$(".roundButton").click(function(e){
    e.stopPropagation();
    $('#caseModal').modal('hide');
});

来源：https://api.jquery.com/event.stoppropagation/

相关问题
最新问题