c# - How i will get aspx as popover using jquery -
window.open('proofofinsurance.aspx?clubid=' + clubid, '', 'width=600,height=430,left=230,top=100'); return false; i got popover window using above code have use jquery function?
showpopup('mailquote.aspx', 'quote link', 90, 90, 'appno=' + getparameterbyname("id") + '&mode=' + p_mode + '&program=' + getparameterbyname("program")); show popup function defined as:
function showpopup(p_url, p_header, p_alertwidth, p_alertheight, p_querystring) { var width = ($(window).width() * p_alertwidth) / 100; var height = ($(window).height() * p_alertheight) / 100; //for smaller screens width , height full screen size if ($(window).width() < 500) { width = $(window).width(); height = $(window).height(); } //background-image: url('../_gfx/popupgrd.jpg') //$("<style>.ui-widget-header { background-color: #5f9dd8 };border: 0px solid #aaaaaa;background: rgba(155, 144, 144, 0)</style>").appendto('body'); //$("<style>.ui-widget-content { border: 1px solid #2d9ce6").appendto('body'); $("<div id='dialog' title='" + p_header + "' style='overflow:hidden;width:100%;height:100%;text-align:center;border:0px solid #fff;'><iframe style='overflow:hidden;width:100%;height:100%;text-align:center;border:0px solid #fff;' src='" + p_url + "?" + p_querystring + "'></iframe></div>").dialog({ width: width, height: height, modal: true, close: function (ev, ui) { window.location.href = window.location.href; overlay = $('<div></div>').prependto('body').attr('id', 'divoverlayloading'); center($('#loadingdialog')); $('#loadingdialog').show(); } }); }
posting fresh code open pop-up asp.net page using pure jquery & css.
first css, popup.css:
.modal-backdrop { background-color: rgba(0, 0, 0, 0.61); position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none; } .modal { width: 500px; position: absolute; top: 25%; z-index: 1020; background-color: #fff; border-radius: 6px; display: none; } .modal-header { background-color: #333; color: #fff; border-top-right-radius: 5px; border-top-left-radius: 5px; } .modal-header h3 { margin: 0; padding: 0 10px 0 10px; line-height: 40px; } .modal-header h3 .close-modal { float: right; text-decoration: none; color: #fff; } .modal-footer { background-color: #f1f1f1; padding: 0 10px 0 10px; line-height: 40px; text-align: right; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top: solid 1px #ccc; } .modal-body { padding: 0 10px 0 10px; } inside parent page add following code. adds popup control keeps hidden. note src set temp.aspx testing.
<asp:button id="btn_open" runat="server" text="open login page" cssclass="openmodal" /> <div class="modal"> <div class="modal-header"> <h3>login <a class="close-modal" href="#">×</a></h3> </div> <div class="modal-body"> <iframe style=" width:100%; height: 100%;" id="ifrm" src="temp.aspx" runat="server"></iframe> </div> <div class="modal-footer"> <asp:button id="btn_close" runat="server" text="ok" cssclass="modalok close-modal" /> </div> now again, in parent page, @ top add css reference , jquery code.
<link rel="stylesheet" href="styles/popup.css" /> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { modalposition(); $(window).resize(function () { modalposition(); }); $('.openmodal').click(function (e) { $('.modal, .modal-backdrop').fadein('fast'); e.preventdefault(); }); $('.close-modal').click(function (e) { $('.modal, .modal-backdrop').fadeout('fast'); }); }); function modalposition() { var width = $('.modal').width(); var pagewidth = $(window).width(); var x = (pagewidth / 2) - (width / 2); $('.modal').css({ left: x + "px" }); } </script>
Comments
Post a Comment