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 file..all 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。不应在<li>之前放置<ul>标记。 根本不是有效的标记。尝试将×放入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>

这是Demo

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

这是一个带有效标记的Demo。

Answer 2

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

调用

Answer 3

试试这个demo。

您正在使用JS打开modal。

您可以使用this。但这有错误的标记为@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>

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

4 个答案: