CODEWITHSUNDEEP
jquerysimplemodaleric-martin-modal
Kender
Kender

Reputation: 1264

SimpleModal not closing when appendTo parent

Okay, I have a modal using SimpleModal jQuery plugin

http://www.ericmmartin.com/projects/simplemodal/

I am attaching it to the parent document of the iframe that is calling it. Basically, click the link it should open the modal with the join (or login) modal windows. height and width defined along with href in the link

why isn't the close button (x in top right corner) working to close the modal (I have even tried adding the SimpleModal .close() function to my jQuery)

frame

my link is like so..

<span class="makemodal"><a href="join-modal.html" data-height="362" data-width="500">Join</a></span>
<span class="makemodal"><a href="register-modal.html" data-height="302" data-width="700">Register</a></span>

my jquery is...

  jQuery(document).ready(function($)
  {
    $('.makemodal a').click(function(){
        var h = $(this).data('height');
        var w = $(this).data('width');
        var src = $(this).attr('href');

        $.modal('<iframe src="' + src + '" style="border: 0; width: 100%; height: 100%;"></iframe>', {
            appendTo: $(window.parent.document).find('body'),
            containerCss:{
                height: h, 
                padding: 0, 
                width: w
            },
            opacity: 80,
            overlayCss: { backgroundColor:"#fff" },
            position: ["1%"],
            overlayClose: true
        });
        return false;
    });
    $('.modal-close').click( function() {
        $.modal.close();
    });
  });

The modal opens properly, this places the modal over the parent page, but the close button does not work. Overlay click to close works (but, the overlay is only visible on the iframe element, not the parent)

for testing, parent is simple (as you can see, its just a top bar menu)

<body style="background-color: #000; margin: 0; color: #fff;">

    <iframe src="frame.php" scrolling="no" style="width: 100%; height: 30px; border: 0; overflow: hidden;"></iframe>

    <p>now is the time for all good men to come to the aid of their country.</p>
</body>

fiddle: https://jsfiddle.net/vcyjr0nd/

Upvotes: 0

Views: 309

Answers (1)

Marko Mackic
Marko Mackic

Reputation: 2333

I'd reformat your code a bit :) First you must go to page http://sorgalla.com/lity/ and download lity, and get this simpler solution(keep in mind this is only if content is served from your server, or server that allows iframes from other location): 

<html>
<head>
<link href="dist/lity.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="dist/lity.js"></script>
</head>

<body>
<!-- Then format this however you like to -->
    <span><a data-lity href="join-modal.html">Join</a></span>
<span><a data-lity href="register-modal.html">Register</a></span>
</body>
</html>

Upvotes: 1

Related Questions