Latest ads
-
Pure VPN - Up to 27 Months- vgp
- Updated:
-
Gemini AI PRO 18 months Offer- Hawaka
- Updated:
-
koko account
- DasunEranga
- Updated:
web developers - mchan meka kohomada hadanne??
- Thread starter gembaknb
- Start date
HTML:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
මේක මම තනියම හදපු එකක්... මේකට jQuery library එක ඕන..
css
.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);
}
js file
$(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 ));
මේ ටික HTML body එකේ දාන්න
html
<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>
css
.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);
}
js file
$(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 ));
මේ ටික HTML body එකේ දාන්න
html
<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>
mama liyapu ekakuth tiyenawa..
but me wage ekak use karanna balanna
but me wage ekak use karanna balanna
HTML:
https://jqueryui.com/dialog/Similar threads
