0

Using the jQuery Reveal plugin from www.zurb.com

html:

<div>
    <a href="#" data-reveal-id="myModal">Click Me For A Modal</a>
</div>
abov div
<div id="myModal" class="reveal-modal">
    <h1>Modal Title</h1>
    <p>Any content could go in here.</p>
    <asp:Label ID="lbl_modalTest" runat="server" ></asp:Label>
    <a class="close-reveal-modal">&#215;</a>
</div>

CSS:

    .reveal-modal-bg { 
    position: fixed; 
    height: 100%;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.8);
    z-index: 100;
    display: none;
    top: 0;
    left: 0; 
    }

.reveal-modal {
    visibility: hidden;
    top: 100px; 
    left: 50%;
    margin-left: -300px;
    width: 520px;
    background: #eee url(modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 30px 40px 34px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);
    }

.reveal-modal.small         { width: 200px; margin-left: -140px;}
.reveal-modal.medium        { width: 400px; margin-left: -240px;}
.reveal-modal.large         { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge        { width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
    font-size: 22px;
    line-height: .5;
    position: absolute;
    top: 8px;
    right: 11px;
    color: #aaa;
    text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    font-weight: bold;
    cursor: pointer;
    }

jQuery:

$('a[data-reveal-id]').live('click', function (e) {
    e.preventDefault();
    var modalLocation = $(this).attr('data-reveal-id');
    var page = $(this).attr('href');
    var div = ('#' + modalLocation);
    $(div).append('<div><iframe style="border: 0px; " src="www.google.com" width="100%" height="100%"></iframe></div>');
    $(div).reveal($(this).data());
});

Works fine in FF & Chrome, but not in IE9.

In IE9 when you first click the button to show the modal popup it pops up as expected but only displays the original contents of the div not the iframe which is appended. However if you close the modal popup and click on the button again, it shows TWO iframes inside the modal. Since it's simply appending, on the second click I would expect to see two iframes BUT why would IE9 not show one iframe on the first click?

Derek Pedersen
  • 31
  • 5
  • IE has issues with preventDefault. Check out [this link](http://stackoverflow.com/questions/1000597/event-preventdefault-function-not-working-in-ie-any-help). – Mark M May 22 '12 at 16:17
  • `jQuery.fn.live` is deprecated. This method brings a **lot of problems** in cross-browser compatibility, specifically in IE. You can use `jQuery.fn.on` in jQuery 1+7 or `jQuery.fn.delegate` in jQuery 1.4+. BTW, you should avoid multiple `$(this)` in the same function. – pomeh May 22 '12 at 16:46
  • After reading the above comments I gave up on the Reveal modal plugin and switched to simplemodal plugin and it's working now. Thanks, I could have chased around 'gremlins' around for awhile. – Derek Pedersen May 22 '12 at 20:07

0 Answers0