Remove From My Forums

Can't call [javascript function] at PageLoad while modalpopup is applied.

Question

User944339287 posted

hi guys.. i wanna call a javascript function (openNav) while the page is load.

but i found that the following code (Page.ClientScript.RegisterStartupScript) is not working unless i take out / disabled the [ModalPopupExtender].

How can i make it both working for me? 1) Open Side Menu 2) Modal Popup 3) Call Javascript Function

CODE BEHIND:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Page.ClientScript.RegisterStartupScript([GetType](), "CallFunction", "openNav()", True)

    End Sub

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!-- side navigation-->
    <style>
    body {
      transition: background-color .5s;
    }
    .sidenav 
    {    
      height: 100%;
      width: 0;
      ;
      z-index: 999;
      top: 0;
      left: 0;
      background-color: #fff;
      color: #000;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 40px;
      padding-bottom: 20px;
      box-shadow:
      0 2.8px 2.2px rgba(0, 0, 0, 0.034),
      0 6.7px 5.3px rgba(0, 0, 0, 0.048),
      0 12.5px 10px rgba(0, 0, 0, 0.06),
      0 22.3px 17.9px rgba(0, 0, 0, 0.072),
      0 41.8px 33.4px rgba(0, 0, 0, 0.086),
      0 100px 80px rgba(0, 0, 0, 0.12);
    }
    .sidenav .closebtn {
      ;
      top: 0;
      right: 0px;
      font-size: 35px;
      margin-left: 50px;
    }
    </style>
    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "350px";
            document.getElementById("main").style.marginLeft = "350px";
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
            document.body.style.backgroundColor = "white";
        }
    </script>
    <!-- side navigation-->
</head>
<body>    
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">[X] CLOSE</a>
    </div>
    <div style="padding-bottom: 20px;"><span style="cursor: pointer" onclick="openNav()">[Open Side Menu]</span></div>

    <asp:Button ID="btn_popup" runat="server" Text="Modal Popup" />   
    <cc1:ModalPopupExtender ID="mpe_search" runat="server" PopupControlID="pnl_search" TargetControlID="btn_popup" CancelControlID="btnClose">
    </cc1:ModalPopupExtender>
    <asp:Panel ID="pnl_search" runat="server" CssClass="modalPopup" align="center" Style="display: none">
        Hello World
        <asp:Button ID="btnClose" runat="server" Text="CLOSE" />
    </asp:Panel>
    </form>
</body>
</html>

Monday, May 25, 2020 4:13 AM

All replies

User1535942433 posted

Hi kengkit,

Accroding to your description and codes,I suggest you could use jquery to call openNav when the page load.

More details,you could refer to below codes:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="2167266.aspx.vb" Inherits="vb._2167266" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {
            transition: background-color .5s;
        }

        .sidenav {
            height: 100%;
            width: 0;
            ;
            z-index: 999;
            top: 0;
            left: 0;
            background-color: #fff;
            color: #000;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 40px;
            padding-bottom: 20px;
            box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
        }

            .sidenav .closebtn {
                ;
                top: 0;
                right: 0px;
                font-size: 35px;
                margin-left: 50px;
            }
    </style>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script>
        function openNav() {
            document.getElementById("mySidenav").style.width = "350px";
            document.getElementById("main").style.marginLeft = "350px";
            document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
        }

        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
            document.getElementById("main").style.marginLeft = "0";
            document.body.style.backgroundColor = "white";
        }
    </script>
    <script>
        $(function () {
            openNav();
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">[X] CLOSE</a>
        </div>
        <div style="padding-bottom: 20px;"><span style="cursor: pointer" onclick="openNav()">[Open Side Menu]</span></div>

        <asp:Button ID="btn_popup" runat="server" Text="Modal Popup" />
        <cc1:ModalPopupExtender ID="mpe_search" runat="server" PopupControlID="pnl_search" TargetControlID="btn_popup" CancelControlID="btnClose"></cc1:ModalPopupExtender>
        <asp:Panel ID="pnl_search" runat="server" CssClass="modalPopup" align="center" Style="display: none">
            Hello World
        <asp:Button ID="btnClose" runat="server" Text="CLOSE" />
        </asp:Panel>
    </form>
</body>
</html>

Code-hebind:

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

Result:

More details,you could refer to below article:

https://jquery.com/download/

Best regards,

Yijing Sun

Tuesday, May 26, 2020 3:30 AM

0

Sign in to vote

User944339287 posted

Hi Yijing Sun,

Thanks! its worked as expected.

Thursday, May 28, 2020 7:55 AM
0

Sign in to vote

User1535942433 posted

Hi kengkit,

If you have solved your problems,you could mark these answers which help you.

Besides,if you have other problems,you could post and we are willing to help you.

Best regards,

Yijing Sun

Friday, May 29, 2020 3:01 AM

Asked by:

Can't call [javascript function] at PageLoad while modalpopup is applied.

Question

All replies