Reply to thread

Message

<blockquote data-quote="chaturanga836" data-source="post: 18979138" data-attributes="member: 544536">මේක මම තනියම හදපු එකක්... මේකට jQuery library එක ඕන..css.ls-popup .ls-popup-header{&nbsp; min-height: 10px;&nbsp; padding: 5px 10px 5px 10px;&nbsp; border-top-left-radius: 5px;&nbsp; border-top-right-radius: 5px;&nbsp; background-color: #454545;&nbsp; color: #fff;&nbsp; font-size: 14px;}.ls-popup .ls-popup-body{&nbsp; &nbsp; min-height: 50px;&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; padding:20px;&nbsp; &nbsp; &nbsp; border-left:1px solid #ccc;&nbsp; border-right: 1px solid #ccc;}.ls-popup .ls-popup-body .title{&nbsp; &nbsp; color: #454545;}.ls-popup .input-group .input-addon{&nbsp; &nbsp; display: inline-block;}.ls-popup .ls-popup-body input[type=&quot;text&quot;],.ls-popup .ls-popup-body input[type=&quot;password&quot;],.ls-popup .ls-popup-body input[type=&quot;email&quot;],.ls-popup .ls-popup-body textarea{&nbsp; padding: 6px;&nbsp; border: 1px solid #ccc;&nbsp; border-radius: 5px;}.ls-popup {&nbsp; &nbsp;&nbsp; z-index: 1000;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: auto;&nbsp; &nbsp; height:auto;&nbsp; &nbsp; display: none;}.ls-popup .ls-popup-footer{&nbsp; &nbsp; min-height: 10px;&nbsp; padding: 5px 10px 5px 10px;&nbsp; border-bottom-left-radius: 5px;&nbsp; border-bottom-right-radius: 5px;&nbsp; color: #fff;&nbsp; font-size: 12px;&nbsp; border-bottom: 1px solid #ccc;&nbsp; border-left:1px solid #ccc;&nbsp; border-right: 1px solid #ccc;&nbsp; background-color: #fff;}.ls_popup_bg{&nbsp; &nbsp; width:100%;&nbsp; &nbsp; height:100%;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:0px;&nbsp; &nbsp; left:0px;&nbsp; &nbsp; z-index:2px;&nbsp; &nbsp; background-color:rgba(0,0,0,0.5);}js file$(function(){&nbsp; &nbsp; $.fn.ls_popup=function(option){&nbsp; &nbsp; &nbsp;&nbsp; var elem=$(this);&nbsp; &nbsp; &nbsp;&nbsp; var close=elem.find('red_btn');&nbsp; &nbsp; &nbsp;&nbsp; var status=option;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; if(status==&quot;open&quot;){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; var winheight=window.innerHeight;&nbsp; &nbsp; &nbsp;&nbsp; var winwidht=window.innerWidth;&nbsp; &nbsp; &nbsp;&nbsp; var div=$('&lt;div /&gt;').addClass('ls_popup_bg');&nbsp; &nbsp; &nbsp;&nbsp; $('body').append(div);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.css({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'display':'block',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'top'<img src="/styles/default/xenforo/smilies/default/sad.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Sad&nbsp; &nbsp; :(" data-shortname=":(" />winheight/2)-(elem.height()/2)+'px',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'left'<img src="/styles/default/xenforo/smilies/default/sad.gif"&nbsp; class="smilie" loading="lazy" alt=":(" title="Sad&nbsp; &nbsp; :(" data-shortname=":(" />winwidht/2)-(elem.width()/2)+'px'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this.each(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.find('.red_btn').click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').find('.ls_popup_bg').remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elem.css('display','none');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; };}( jQuery ));මේ ටික HTML body එකේ දාන්නhtml&lt;div class=&quot;ls-popup&quot; id=&quot;cs&quot;&gt;&nbsp;&nbsp; &lt;div class=&quot;ls-popup-header&quot;&gt;Upload Publication&lt;/div&gt;&nbsp;&nbsp; &lt;div class=&quot;ls-popup-body&quot;&gt;&nbsp; &nbsp;&nbsp; &lt;div class=&quot;input-group&quot;&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;div class=&quot;title input-addon&quot;&gt;User Name&lt;/div&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;div class=&quot;inputs input-addon&quot;&gt;&lt;input type=&quot;text&quot;/&gt;&lt;/div&gt;&nbsp; &nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp; &lt;div class=&quot;ls-popup-footer&quot;&gt;&nbsp; &nbsp;&nbsp; &lt;input class=&quot;confirm_friend green_btn&quot; type=&quot;submit&quot; value=&quot;Save&quot;/&gt;&nbsp; &nbsp;&nbsp; &lt;input class=&quot;red_btn confirm_friend&quot; type=&quot;submit&quot; value=&quot;Cancel&quot;/&gt;&nbsp;&nbsp; &lt;/div&gt;&lt;/div&gt;</blockquote>

[QUOTE="chaturanga836, post: 18979138, member: 544536"] [SIZE="5"]මේක මම තනියම හදපු එකක්... මේකට jQuery library එක ඕන..[/SIZE] [B][SIZE="6"]css [/SIZE][/B] [COLOR="RoyalBlue"].ls-popup .ls-popup-header { min-height: 10px; padding: 5px 10px 5px 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #454545; color: #fff; font-size: 14px; } .ls-popup .ls-popup-body { min-height: 50px; background-color: #fff; padding:20px; border-left:1px solid #ccc; border-right: 1px solid #ccc; } .ls-popup .ls-popup-body .title{ color: #454545; } .ls-popup .input-group .input-addon{ display: inline-block; } .ls-popup .ls-popup-body input[type="text"], .ls-popup .ls-popup-body input[type="password"], .ls-popup .ls-popup-body input[type="email"], .ls-popup .ls-popup-body textarea{ padding: 6px; border: 1px solid #ccc; border-radius: 5px; } .ls-popup { z-index: 1000; position: absolute; width: auto; height:auto; display: none; } .ls-popup .ls-popup-footer{ min-height: 10px; padding: 5px 10px 5px 10px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #fff; font-size: 12px; border-bottom: 1px solid #ccc; border-left:1px solid #ccc; border-right: 1px solid #ccc; background-color: #fff; } .ls_popup_bg{ width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:2px; background-color:rgba(0,0,0,0.5); } [/COLOR] [B][SIZE="6"]js file[/SIZE][/B] [COLOR="DarkOrange"]$(function(){ $.fn.ls_popup=function(option){ var elem=$(this); var close=elem.find('red_btn'); var status=option; if(status=="open"){ var winheight=window.innerHeight; var winwidht=window.innerWidth; var div=$('<div />').addClass('ls_popup_bg'); $('body').append(div); elem.css({ 'display':'block', 'top':(winheight/2)-(elem.height()/2)+'px', 'left':(winwidht/2)-(elem.width()/2)+'px' }); } return this.each(function(){ elem.find('.red_btn').click(function(){ $('body').find('.ls_popup_bg').remove(); elem.css('display','none'); }) }); }; }( jQuery )); [/COLOR] [SIZE="6"][B]මේ ටික HTML body එකේ දාන්න html[/B][/SIZE] [SIZE="5"]<div class="ls-popup" id="cs"> <div class="ls-popup-header">Upload Publication</div> <div class="ls-popup-body"> <div class="input-group"> <div class="title input-addon">User Name</div> <div class="inputs input-addon"><input type="text"/></div> </div> </div> <div class="ls-popup-footer"> <input class="confirm_friend green_btn" type="submit" value="Save"/> <input class="red_btn confirm_friend" type="submit" value="Cancel"/> </div> </div>[/SIZE] [/QUOTE]

Verification

Winadiyakata thappara keeyak tibeda?

Search

Latest ads

Reply to thread