CODEWITHSUNDEEP
javascripthtml
Anu
Anu

Reputation: 925

Modal dialog not closing by default close x button

I have following modal dialog coding,but when i click [X],the dialog doesn't closed. I invoke the dialog from button and the JavaScript function as follow;

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

Modal code

<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>

Did i miss anything?

Adding Javascript file..all javascript functions in seperate .js file.

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();  
});

When i click Back button, by calling the function showLeaveView();

Upvotes: 0

Views: 695

Answers (4)

shalini
shalini

Reputation: 1290

Try this layout : 

  <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>

Upvotes: 0

Raviteja
Raviteja

Reputation: 3479

Try this demo.

You are opening your modal using JS.

You can use this.But this has wrong markup as @Alorika Mentioned

    <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();

Upvotes: 0

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

Apart from adding $('#apply_Compensation_Leave').modal('show');, you need to change your HTML also. <li> tag should not be put without <ul>. It's not valid markup at all. Try putting &times; in your 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>

Here is a Demo

Or you can provide valid markup like this <ul><li class="fa fa-times"></li></ul>

Here is a Demo with the valid markup.

Upvotes: 1

Sebin Thomas
Sebin Thomas

Reputation: 289

The bootstrap Modal is invoked by $('#apply_Compensation_Leave').modal('show');

Upvotes: 0

Related Questions