模式对话框默认情况下不关闭关闭x按钮

Question

我有以下模态对话框编码，但是当我单击[X]时，对话框没有关闭。 我从按钮和JavaScript函数调用对话框，如下所示；

$('#apply_Compensation_Leave').show();

模态代码

<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"> 
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"  aria-hidden="true"><li class="fa fa-times"/></button>
        <h3 style="font-size: 17px;">Apply Leave</h3>
    </div>
<div class="modal-body">
</div>
</div>
</div>
</div>

我想念什么吗？

在单独的.js文件中添加Javascript文件..所有javascript函数。

EmpcompensationAdapter.method('getActionButtonsHtml', function(id,data) {
    var html = "";
    html = '<div style="width:80px;"><img class="tableActionButton" src="BASE_URL/apply.png" style="cursor:pointer;" rel="tooltip" title="Apply Leave" onclick="modJs.applyleaves();return false;"></img></div>';
    return html;
});

EmpcompensationAdapter.method('applyleaves', function() {

    $('#apply_Compensation_Leave').show();

});

EmpcompensationAdapter.method('showLeaveView', function() {
    $('#apply_Compensation_Leave').hide();  
});

当我单击“后退”按钮时，通过调用函数showLeaveView（）;

Answer 1

除了添加$('#apply_Compensation_Leave').modal('show'); ，您还需要更改HTML。 如果没有<ul>不应放置<li>标记。 这根本不是有效的标记。 尝试放置× 在您的button HTML中。

<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"> 
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
 </div>

这是一个演示

或者，您可以提供有效的标记，例如<ul><li class="fa fa-times"></li></ul>

这是带有有效标记的演示 。

Answer 2

引导模态由$('#apply_Compensation_Leave').modal('show');调用$('#apply_Compensation_Leave').modal('show');

Answer 3

试试这个演示 。

您正在使用JS打开modal 。

您可以使用此标记。但是标记为@Alorika时标记错误

    <div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

        </button>
        <h3 style="font-size: 17px;">Apply Leave</h3>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

的JavaScript

$('#apply_Compensation_Leave').show();   

Answer 4

试试这个布局：

  <div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel">  <center>Title here </center> </h4>
      </div>
      <div class="modal-body">
        ...Body here...
      </div>

      <div class="modal-footer">
       <button type="button" id="Okbtn" class="btn btn-danger" data-dismiss="modal"> CANCEL</button>

      </div>
    </div>
  </div>
  </div>