javascript - 用 jquery 覆盖弹出窗口

Question

我需要从外部工具推送对话框弹出窗口，只能使用 javascript/jquery。

当我使用 $("body").prepend("<popup html>"); 时弹出窗口位于页面上方。我希望它是一个居中于中间的叠加层？

我该如何实现？真的卡住了..

完整代码:

$("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

尝试以下操作:需要样式并且需要 JQuery.js 引用。

 $(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>