Home/ Questions/Q 8076933
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T15:22:03+00:00

I created a link which is responsible for showing up modal window. The modal

  • 0

I created a link which is responsible for showing up modal window. The modal window shows up fine, but i must click two times… How to fix?

html code with links:

<body>
<a href="?id=1#" class="runpl">Buy product #1</a>
<br/><a href="?id=2#" class="runpl">Buy product #2</a>
</body>

jQuery start functions:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="plPopup.min.js"></script>
<script type="text/javascript">

$(this).ready(function(){

        $('.runpl').plPopup("..popup html code..");

});

</script>

plPopup.min.js:

(function($)
{
    var f = {width:'650',height:'150',background:false,html:'',url:'',close:'close'};
    var g;

    $.fn.plPopup=function(d)
    {
        g=$.extend({},f,g,d);
        var e=1+Math.floor(Math.random()*1024);
        if(g.background)
    {
        if(!$("div").is("#plup_fade"))
        {
            $("body").append('<div id="plup_fade'+e+'" class="plup_fade"></div>');
            $("#plup_fade"+e).hide()
            }
    }

    $("body").append('<div id="plup_msg'+e+'" class="plup_msg" style="width:'+parseInt(g.width)+'px; min-height:'+parseInt(g.height)+'px; height:'+parseInt(g.height)+'px; margin-top: -'+(parseInt(g.height)/2)+'px; margin-left: -'+(parseInt(g.width)/2)+'px;"></div>');


    $("#plup_msg"+e).html('<div class="plup_close" style="text-align:right;"><a href="#" title="'+g.close+'"><img src="img/popup/close.png"/></a></div><div class="plup_data"></div>');

    if(g.html)
    {
        $("#plup_msg"+e+" .plup_data").html(g.html)
    }else
    {
        if(g.url)
        {
            $("#plup_msg"+e+" .plup_data").load(g.url,function(a,b,c)
            {
                if(b=="error")
                {$("#plup_msg"+e+" .plup_data").html('<b>plPopup:</b> Error loading data =(</div>')}
                })
                }else{$("#plup_msg"+e+" .plup_data").html('<b>plPopup:</b> Nothing to render! =(')
                }
                }
                $("#plup_msg"+e).hide();$(this).click(function(){$("#plup_fade"+e).show();$("#plup_msg"+e).fadeIn('slow')});
                $("#plup_msg"+e+" .plup_close a, #plup_fade"+e).click(function()
                {
                    $("#plup_msg"+e).fadeOut('slow');$("#plup_fade"+e).delay(8000).hide()
                });


    return this
    }

})(jQuery);

but he is fine maybe

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    try changing 

    $(this).ready(function(){

    to this:

    $(document).ready(function(){

    EDIT after looking at code:

    This is happening because you are linking to a parameter which reloads the page. So Jquery does its thing on the click, but then the page refreshes which takes it back to its initial state. The second mouse click doesnt change the url because you already have loaded those paremeters, so the jquery displays the popup.

    You can take out the href=”” from the links and you will see you can still click on them but they dont reload the url and everything works as expected.

    • 0