javascript - Creating a modal dialog - content disappearing -

-

i trying make jquery modal dialog. (please not "use plugin").

i aware js using crap, once trying hack basic functionality, once have basic functionality down rewrite jquery plugin own use.

anyway,

i have got dialog appearing, , in center of page, dialog sized content.

in specific example content has fixed width.

i trying handle case content bigger page width.

i getting strange issue where, if page resized content seems literally cut off, no scroll bars.

what issue?

example: http://jsbin.com/egowo3/edit
css: 

body {   padding: 0;   margin: 0;   color: #fff; }  #overlay {   position:fixed;   width:100%;   height:100%;   background: rgba(0,0,0,0.8);   z-index: 9999;   display: none; }  #dialog {   display: none;   background: #000;   border: 1px solid #0000ff;   position: fixed;   z-index: 99999; }  #test {   display: none;   width: 1300px; }

javascript 

$(function(){   $('button').click(function(){      var body = $('body');     var content = $('#test');     var dialog = $('<div id="dialog"></div>');     var overlay = $('<div id="overlay"></div>');      var width = content.outerwidth(true);     var height = content.outerheight(true);      body.prepend(dialog);     body.prepend(overlay);     dialog.prepend(content)           .height(height)           .width(width);      content.show();       var left = (overlay.width()/2)-(dialog.outerwidth()/2);     var top = (overlay.height()/2)-(dialog.outerheight()/2);      dialog.css({       left : left,       top  : top     });      overlay.fadein('fast');     dialog.fadein('fast');      $(window).resize(function() {       overlay = $('#overlay');       dialog = $('#dialog');        if(overlay.length == 0 || dialog.length == 0)         return false;        var left = (overlay.width()/2)-(dialog.outerwidth()/2);     var top = (overlay.height()/2)-(dialog.outerheight()/2);      dialog.css({       left : left,       top  : top     });      });   }); });

html

<body>   <button>modal me</button>   <div id="test">     <p>pid ac lundium urna tempor vut, elementum adipiscing mauris, magna cum odio! urna pulvinar, et egestas magna diam mus porttitor natoque urna nisi turpis amet sed, etiam penatibus, nascetur cras lectus auctor? nisi, elementum ac dictumst facilisis nec elementum ac? placerat adipiscing? dis montes cursus sagittis etiam et tortor ridiculus.</p>     <p>nisi nec mid? enim amet, enim rhoncus nisi penatibus nec, natoque amet placerat in in? scelerisque magna, aliquam elit habitasse turpis parturient et facilisis urna adipiscing, porta hac nunc, sit pellentesque! in enim? mus nunc risus amet sed tincidunt, hac placerat placerat diam, et et, sociis mid. pellentesque, vel.</p>   </div> </body>

that's happening because using position: fixed, pretty sure disregards page borders. why don't compare element's width of page, , decide course of action take there?

if($("#dialog").width() > $(window).width()){ alert("content overflow window."); }

Comments

Post a Comment

Popular posts from this blog

objective c - Change font of selected text in UITextView -

-
can suggest me how change font of selected text in uitextview.i cannot use uiwebview since have edit text. have seen pages app.how possible in app. see formatting text within uilabel differently . since need editing, should @ javascript-based editors such ckeditor or tinymce . highly recommend wwdc 2011 video session 511: "rich text editing in safari on ios."
Read more

php - Accessing POST data in Facebook cavas app -

-
so i've got simple form in canvas / iframe facebook app, , i'm trying pass along values post. reading on s.o. , fb's latest docs, understand it, data send via post form can accessed on receiving end $_request object. i read on thread on s.o. in order post forms work need pass along input named "signed_request" value current signed_request (i have signed request working ok otherwise...all login , authentication stuff working fine). isnt mentioned anywhere in official fb docs. so problem comes in $_request object signed request, , bunch of other session stuff. form inputs found. the way can read them set method of form "request" isn't real form method. takes of inputs , sends them args in url. horrible. here's sample page canvas app form i'm using try debug (leaving out authentication stuff): <form enctype="application/x-www-form-urlencoded" method="post" target="_top" id="my_form" action=...
Read more

c# - Getting control value when switching a view as part of a multiview -

-
i have following code in aspx page: <asp:button id="display_button" runat="server" text="display" onclick="button1_click" /> &nbsp; <asp:button id="edit_button" runat="server" text="edit" onclick="button2_click" /> &nbsp; <asp:button id="save_button" runat="server" text="save" onclick="button3_click" visible="false" /> &nbsp; <asp:multiview id="multiview1" runat="server" activeviewindex="0"> <asp:view id="view1" runat="server"> <asp:formview id="view_program" runat="server"> <itemtemplate> <%# eval("status").tostring().trim() %> </itemtemplate> </asp:formview> </asp:view> <asp:view id="view2" runat="server"> ...
Read more