Overlay popup with jquery

Question

I need to push a dialouge popup from an external tool and can only use javascript/jquery.

When I use $("body").prepend("<popup html>"); the popup lays above the page. I want it to be an overlay centered in the middle?

How do I achieve that? Really stuck..

Full code:

 $("body").prepend('<div class="modal-dialog" style="max-width: 350px;"><divclass="modal-content"><div class="modal-header" style="border-bottom: none; height: 50px;"><button type="button" class="close" style="font-size: 60px; line-height: .5em; margin-top: 0;">×</button></div><div style="padding: 5px 20px 20px 20px;"><div class="row"><div class="col-xs-12"><div id="dialog"><h2 style="margin-top: 0px;">Bevaka produkt</h2><div id="dialog-form"><p class="validateTips" style="margin-bottom: 15px;"><small>Här kan du skriva in din e-post och få ett mail när produkten finns i lager igen.</small></p><form><fieldset><label for="email">E-postadress</label><br /><input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" style="display: block; width: 100%; height: 29px; padding: 6px 12px; font-size: 11px; line-height: 1.4; margin-bottom: 15px;" required="required" /></fieldset></form></div></div><button type="submit" class="btn btn-primary">Bevaka</button></div><div class="col-sm-12"><label class="checkbox-inline margin-top-lg"><input checked="checked" data-bind="enable: CompanyName().length &gt; 1" data-val="true" data-val-required="The Missa inte våra bästa erbjudanden - prenumerera på vårt nyhetsbrev. field is required." id="OffersByEmail" name="OffersByEmail" type="checkbox" value="true" disabled="disabled" /><input name="OffersByEmail" type="hidden" value="false" /> <label class="margin-off no-padding" for="OffersByEmail">Missa inte våra bästa erbjudanden - prenumerera på vårt nyhetsbrev.</label> </label></div></div></div></div></div>'); 

Answer 1

Try the following: Style is needed and JQuery.js reference is needed.

  $(document).ready(function () { $("body").prepend('<div class="modal-dialog Popup-Content"><divclass="modal-content"><div class="modal-header" style="border-bottom: none; height: 50px;"><button type="button" class="close" style="font-size: 60px; line-height: .5em; margin-top: 0;">×</button></div><div style="padding: 5px 20px 20px 20px;"><div class="row"><div class="col-xs-12"><div id="dialog"><h2 style="margin-top: 0px;">Bevaka produkt</h2><div id="dialog-form"><p class="validateTips" style="margin-bottom: 15px;"><small>Här kan du skriva in din e-post och få ett mail när produkten finns i lager igen.</small></p><form><fieldset><label for="email">E-postadress</label><br /><input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" style="display: block; width: 100%; height: 29px; padding: 6px 12px; font-size: 11px; line-height: 1.4; margin-bottom: 15px;" required="required" /></fieldset></form></div></div><button type="submit" class="btn btn-primary">Bevaka</button></div><div class="col-sm-12"><label class="checkbox-inline margin-top-lg"><input checked="checked" data-bind="enable: CompanyName().length &gt; 1" data-val="true" data-val-required="The Missa inte våra bästa erbjudanden - prenumerera på vårt nyhetsbrev. field is required." id="OffersByEmail" name="OffersByEmail" type="checkbox" value="true" disabled="disabled" /><input name="OffersByEmail" type="hidden" value="false" /> <label class="margin-off no-padding" for="OffersByEmail">Missa inte våra bästa erbjudanden - prenumerera på vårt nyhetsbrev.</label> </label></div></div></div></div></div>'); }); 

  .Popup-Content { left: 30%; top: 20%; position: fixed; padding: 5px; z-index: 199; /* Sit on top */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ -webkit-animation-name: fadeIn; /* Fade in the background */ -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>