modal not fading

Question

This is the javascript I am using to get the fading effect for the modal... It isn't working. I dont know why. It just pops up like in a flash. I want it to fade in slowly & then fade out when closed.

     <link href="Styles/myStyleSheet.css" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
 <link href="Styles/Tab.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript" language="javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

var launch = false;
function launchModalV2() {
    launch = true;
}

function pageLoad() {
    if (launch) {
        //alert('1');
        // $find("mpeTest").show();
        $find('mpeTest').fadeIn();
    }
}

function launchModalV1() {
    alert('1');
    //$find('mpeTest').show();
    $find('mpeTest').fadeIn();
    return false;
}

CSS Class:

.modalBackground
{
background-color: Black;
-filter: alpha(opacity=80);
-opacity: 0.6;
z-index: 10000;
}


<div style="position:absolute">
<act:ModalPopupExtender ID="mpeTest" BehaviorID="mpeTest" runat="server" TargetControlID="btnShowModal" PopupControlID="pnlPopup" OkControlID="btnOk" BackgroundCssClass="modalBackground">
</act:ModalPopupExtender>  
<asp:Button ID="btnOk" runat="server" Text="Ok" />
</div>

 <div>
    <asp:UpdatePanel runat="server" ID="pnlPopup">
    <ContentTemplate>
    <asp:Panel ID="pnlMyAddressBook" runat="server" BackColor="White" CssClass="roundcorner pnl">

    <table style="width:100%" cellspacing="0px" cellpadding="0px">..........

It would help to see what HTML has been generated by the `ModalPopupExtender`, also what JS library are you using? — plalx, Apr 08 '13 at 06:11

score 0 · Answer 1 · answered Apr 08 '13 at 05:47

0

You can try using $("#mpeTest").modal("show") despite using $find('mpeTest').fadeIn();

answered Apr 08 '13 at 05:47

Ali Shah Ahmed

3,263
3
24
22

Despite meaning with...rt? And should I put this line before or after the fadeIn()? – who-aditya-nawandar Apr 08 '13 at 05:49
I meant, replace `$find('mpeTest').fadeIn()` with `$("#mpeTest").modal("show")`. Hope it works for you. – Ali Shah Ahmed Apr 08 '13 at 05:50
Doesn't work.. probably you dint understand... I want it to FADE IN... It is SHOWing already! – who-aditya-nawandar Apr 08 '13 at 05:53
hmmm. in that case, there might be some css issue, you might be missing some class on the modal div. – Ali Shah Ahmed Apr 08 '13 at 05:55
Actually i faced a similar issue some time back, and it was solved after applying correct classes on the modal div. – Ali Shah Ahmed Apr 08 '13 at 05:56
Well for showing modal, the above provided code is complete. If you could add your html, that might help us identifying the problem. – Ali Shah Ahmed Apr 08 '13 at 06:03
Sorry but can exactly identify what the problem is. – Ali Shah Ahmed Apr 08 '13 at 06:18

modal not fading

1 Answers1