CODEWITHSUNDEEP
javascriptjquery
Piotr Sikora
Piotr Sikora

Reputation: 155

Close button in leanModal

Hi there I got small problem , i need add to my leanmodal close button pic I already got close.png but I dont know how to add this to code. Any help ?

My function looks like that :

<script type="text/javascript"> $(function(){
      $('#loginform').submit(function(e){       return false;     });        
      $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" }); }); 

</script>

Upvotes: 0

Views: 1845

Answers (2)

MisterJ
MisterJ

Reputation: 929

You need to set the css of class "hidemodal" right in order to make it work.

On the example of leanModal's website (by analyzing the source code), you have this line of code : 

.modal_close { position: absolute; 
               top: 12px; 
               right: 12px; 
               display: block; 
               width: 14px; 
               height: 14px; 
               background: url(../img/modal_close.png); 
               z-index: 2;}

So you need to change .modal_close by .hidemodal and to adjust this code to your desires.

Another problem is that you need to have a <a class="modal_close" href="#"></a> in your html code, it is not auto-added by leanModal plugin.

Upvotes: 2

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

Add it via a CSS declaration

  .hidemodal {
    position: absolute;
    top: 12px;
    right: 12px;
    display: block;
    width: 14px;
    height: 14px;
    background: url(../img/close.png); <---- Add it here
    z-index: 2;
  }

Upvotes: 0

Related Questions