Geek asks and answers

Modal display of page load

Hi, I wrote the following javascript to enable modals with dynamically generated identifier tags that will be placed on the central screen using the resize function (regardless of their width and height).

However, when the page loads, the modal shows, unlike what it showed onClickwith the button. I am noob, so I'm not sure what I need to change in my code, so the modal information is hidden when the page loads.

JavaScript:

    $ ('body'). prepend ('');

    $ (function () {
        $ (window) .resize (function () {       

    // get the screen height and width  
    var maskHeight = $ (window) .height ();  
    var maskWidth = $ (window) .width ();

    // calculate the values ​​for center alignment
    var dialogTop = (maskHeight - $ ('. modalbox'). height ()) / 2;  
    var dialogLeft = (maskWidth - $ ('. modalbox'). width ()) / 2; 

    // assign values ​​to the overlay and dialog box
    $ ('# overlay'). css ({height: maskHeight, width: maskWidth}). show ();
    $ ('# modalcontainer'). css ({top: dialogTop, left: dialogLeft}). show ();
    }). resize ();
    });

    $ ('a.modal'). each (function () {
          var link = $ (this);
          var id = link.attr ('href');
          var target = $ (id);               

          if ($ ("# modalcontainer" + id) .length === 0) {
              $ ('# modalcontainer'). append (target);
          }

          $ ("# main" + id) .remove ();

          link.click (function () {
            $ ('# modalcontainer> div'). hide ();        
            target.show ();
            $ ('# overlay'). show ();
            return false;
          });
        });

        $ ('. close'). click (function () {
          $ ('# modalcontainer> div'). hide ();
          $ ('# overlay'). hide ();

          return false;
        });

CSS

    #overlay {
      background: url (../ img / overlay_bg.png);
      position: absolute;
      z-index: 10;
    }

    #modalcontainer {
    position: absolute;
        z-index: 20;
    }

HTML: 

<a href="#modal1" class="modal button plain">view modal</a>
<div style="width:650px; height:400px;" id="modal1" class="modalbox">               
  <div class="box-header">
    <p  align="center">Here is your modal</p>
    <div class="box-content">

    </div>
    <div align="center" class="action_bar">              
      <a href="#" class="close button blue">Close</a>
    </div>
  </div>
    </div>​

code>

Demo in jsfiddle: http://jsfiddle.net/5Egf8/4/

Any help is appreciated.?

+3
source share
2 answers

Update: Now that I see my violin, I have revised my answer. See working fork here: http://jsfiddle.net/JXHAt/3/

, . , #modalcontainer. , .modalbox, .modalbox-active, .modalbox-active , .

+1

function(); , :

$( '') PREPEND ( '');.

$(window).resize(function(){       

// get the screen height and width  
var maskHeight = $(window).height();  
var maskWidth = $(window).width();

// calculate the values for center alignment
var dialogTop =  (maskHeight  - $('.modalbox').height())/2;  
var dialogLeft = (maskWidth - $('.modalbox').width())/2; 

// assign values to the overlay and dialog box
$('#overlay').css({ height:maskHeight, width:maskWidth }).show();
$('#modalcontainer').css({ top: dialogTop, left: dialogLeft}).show();
}).resize();
});

$('a.modal').each(function() {
      var link = $(this);
      var id = link.attr('href');
      var target = $(id);               

      if($("#modalcontainer " + id).length === 0) {
          $('#modalcontainer').append(target);
      }

      $("#main " + id).remove();

      link.click(function() {
        $('#modalcontainer > div').hide();        
        target.show();
        $('#overlay').show();
        return false;
      });
    });

    $('.close').click(function() {
      $('#modalcontainer > div').hide();
      $('#overlay').hide();

      return false;
    });​

, () {} . !

+1

More articles:


All Articles