Sunday, 7 June 2015

Jquery popup

1. put <script src="AppResource/JS/jquery-1.9.1.min.js" type="text/javascript"></script>  and
<script src="AppResource/JS/jquery-ui.js" type="text/javascript"></script>  into master page or corresponding page.

2. Inside aspx page write below codes

<script type="text/javascript">

function Confirmpopup(){
$('#hider').fadeIn("slow");
$("#divConfirm").dialog({modal:true})
}

function CloseModalWnd(){
$('#hider').fadeOut("slow");
$(".ui-dialog-content").dialog().dialog("close");

function HideModalWind() {
$("#hider").hide();
$("#divConfirm").hide();
}

<style type="text/css">

.ui-dialog-content ui-widget-content{
width: 800px !import;
height:500px !import;
}

#divConfirm{
background-color:white;
width:1000px !import;
margin-top: -40px;
height:500px !impotant;
margin-left:-200px;
}
</style>

3. In code behind

declare globaly

 bool isHideModel=true;

write
protected override void onInit(EventArgs e)
{
if(isHideModel)
ScriptManager.RegisterStartupScript(Page, typeof(Page),"Hidepopout","HideModalWind();",true);
}

in button click to display popup code

protected void popout_click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript('Page,typeof(Page),"popout","Confirmpopup();",true);
}

4. ok close button inside popup

<input type="button" id="btnOk" value="Ok" onClick=""/>
<input type="button" id="btnClose" value="Close" style="Width: 50px; font-weight:bold;" onClick="CloseModalWnd();" />

No comments:

Post a Comment