Home/ Questions/Q 9052589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T13:12:42+00:00

I have this working pop up HTML code: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0

  • 0

I have this working pop up HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title>PopUp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.popup.min.js"></script>

<script type="text/javascript">
jQuery(function () {
    jQuery().popup();
});
</script>
</head>
<body>

<a href="#" id="triggerforpopup" rel="popup-open">Show popup</a>

<div id="popup-box">
This is the pop up content. The quick brown fox jumps over the lazy dog.
</div>
</body>
</html>

The actual pop up content is inside the:

<div id="popup-box">
</div>

Is it possible to transfer the pop up HTML content (..) to my JS file? Actually inside the jQuery function click event? Example:

jQuery( document ).ready( function($) {
    $('#triggerforpopup').live('click',(function() {
        //launch the pop code to HTML
    }));
});

So after the click event, the JS will simply pop it out, but it’s originating inside the JS file not an HTML hidden on an existing content.

The reason is that I’m writing a WordPress plugin and it would be convenient to have all this information in a JS file. I don’t want putting additional HTML code in the existing template content which is hidden by default.

Thanks for helping.

UPDATE: I have created a fiddle for this one here: http://jsfiddle.net/codex_meridian/56ZpD/3/

(function (a) {
a.fn.popup = function (b) {
    var c, d = [self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop];
    a("body").append(c = a('<div id="popup-overlay"></div>')), _init = function () {
        _add_overlay(), _add_buttons(), a("#popup-box #popup-content").css("max-height", a(window).height() - 400), a(window).on("resize", function () {
            a("#popup-box #popup-content").css("max-height", a(window).height() - 400)
        })
    }, _add_overlay = function () {
        c.css({
            opacity: .85,
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            "z-index": 99999,
            display: "none",
            height: a(document).height()
        })
    }, _show_overlay = function () {
        c.is(":visible") || c.fadeIn("fast")
    }, _hide_overlay = function () {
        c.is(":visible") && c.hide()
    }, _add_buttons = function () {
        a("a[rel=popup-close]").click(function () {
            return _hide_box(), !1
        }), a("a[rel=popup-open]").click(function () {
            return _show_box(), !1
        })
    }, _show_box = function () {
        if (!a("#popup-box").is(":visible")) {
            _show_overlay(), a("#popup-box").fadeIn("fast");
            var b = a("html");
            b.data("scroll-position", d), b.data("previous-overflow", b.css("overflow")), b.css("overflow", "hidden"), window.scrollTo(d[0], d[1])
        }
    }, _hide_box = function () {
        if (a("#popup-box").is(":visible")) {
            var b = a("html"),
                c = b.data("scroll-position");
            b.css("overflow", b.data("previous-overflow")), window.scrollTo(c[0], c[1]), _hide_overlay(), a("#popup-box").hide()
        }
    }, _init()
}
})(jQuery)
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    use

    var popupHtml = $('<div>This is the pop up content. The quick brown fox jumps over the lazy dog.</div>');

    popupHtml.popup();

    I found lots of issues in the popup plugin you have used. Fixed them to make it working. Have a look http://jsbin.com/oyamiy/6/watch

    • 0