locked
Popup Modal displaying on page not in modal RRS feed

  • Question

  • User-1901014284 posted

    Hi,

    I have a Popup Modal which when I button click pops up. I have implemented the same Popup Modal on a different page but the modal is not working correctly. The modal is displayed underneath the button rather than displaying on button click on a popup modal. please see below my code:

    //Links
    <link rel="Stylesheet" href="Styles/bootstrap.min.css" style="" />  
    <link rel="Stylesheet" href="Styles/bootstrap.css" />  
    
    //Scripts
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    
    
    //Code Sections
    
    <section id="DEPTS" class="two" style="height:auto">
    				
    			<header>
    				<h2>Company Department's</h2>
    			</header>
    
    
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="container">
        <button type="button" class="icon fa-sitemap" data-toggle="modal" data-target="#myDeptModal" style="left: 0px; top: 0px; width: 270px; height: 70px; background-color: #DF554C; font-weight: bold; font-size: medium;"> Add Department</button>
    
        <div class="modal fade" id="myDeptModal" role="dialog">
        <div class="modal-dialog">
        
          <div class="modal-content">
            <div class="modal-header">
    
              <button type="button" class="icon fa-close" style="background-color: #DF554C; font-weight: bold; font-size: x-small;" data-dismiss="modal"></button>&nbsp;&nbsp; Add Department's
            </div>
            <div class="modal-body">
    
                <asp:Label ID="DeptName" runat="server" Text="Department Name"></asp:Label>
                <asp:TextBox ID="Deptnametxt" runat="server"></asp:TextBox>
            <br />
      
                <asp:Button ID="DeptUpload" runat="server" Text=" Dept Upload" OnClick="DeptUpload_OnClick" style="background-color: #DF554C; font-weight: bold; font-size: medium;" class="icon fa-upload" />  
                    </div>
    
    
                <div class="modal-footer">
              <button type="button" style="background-color: #DF554C; font-weight: bold; font-size: medium;" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
    </div>
    </div>
    
              <asp:GridView ID="ViewDeptDG" runat="server" CssClass="mydatagrid" PagerStyle-CssClass="pager" HeaderStyle-CssClass="header" RowStyle-CssClass="rows" AllowPaging="True" OnItemDataBound="Item_Bound"  >
                  <Columns>  
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center">  
                    </asp:TemplateField>  
                </Columns>  
                </asp:GridView>
    
    		
    
    </section>

    I cannot see why this would not be working. There is no master page linked to this page however when adding the below Stylesheet the dropdowns seem to work with no issues but all the content within the webpage shrinks.

    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />

    Any help would be greatly appreciated.

    Many thanks

    Jonny

    Wednesday, April 17, 2019 11:19 AM

Answers

  • User288213138 posted

    Hi  jonnygareth30,


    According to your description, I have tried to reproduce your problem and found that your code is working normally. And when I added the style sheet you mentioned, the content of the page did not shrink. I suggest you check your CSS and js, remove or add some, and see if the problem is resolved,If not, please post all your code .Here is my code:
     
    The Code:

    //Links
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    //Script
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    //code Sesion
    <section id="DEPTS" class="two" style="height:auto">
            <header>
                <h2>Company Department's</h2>
            </header>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div class="container">
                <button type="button" class="icon fa-sitemap" data-toggle="modal" data-target="#myDeptModal" style="left: 0px; top: 0px; width: 270px; height: 70px; background-color: #DF554C; font-weight: bold; font-size: medium;"> Add Department</button>
    
                <div class="modal fade" id="myDeptModal" role="dialog">
                    <div class="modal-dialog">
    
                        <div class="modal-content">
                            <div class="modal-header">
    
                                <button type="button" class="icon fa-close" style="background-color: #DF554C; font-weight: bold; font-size: x-small;" data-dismiss="modal">&nbsp;&nbsp; Add Department's</button>
                            </div>
                            <div class="modal-body">
    
                                <asp:Label ID="DeptName" runat="server" Text="Department Name"></asp:Label>
                                <asp:TextBox ID="Deptnametxt" runat="server"></asp:TextBox>
                                <br />
    
                                <asp:Button ID="DeptUpload" runat="server" Text=" Dept Upload" OnClick="DeptUpload_OnClick" style="background-color: #DF554C; font-weight: bold; font-size: medium;" class="icon fa-upload" />
                            </div>
                            <div class="modal-footer">
                                <button type="button" style="background-color: #DF554C; font-weight: bold; font-size: medium;" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <asp:GridView ID="ViewDeptDG" runat="server" CssClass="mydatagrid" PagerStyle-CssClass="pager" HeaderStyle-CssClass="header" RowStyle-CssClass="rows" AllowPaging="True" OnItemDataBound="Item_Bound">
                <Columns>
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </section>
    

    The Result:
     
    Best Regard,
    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 18, 2019 7:16 AM

All replies

  • User288213138 posted

    Hi  jonnygareth30,


    According to your description, I have tried to reproduce your problem and found that your code is working normally. And when I added the style sheet you mentioned, the content of the page did not shrink. I suggest you check your CSS and js, remove or add some, and see if the problem is resolved,If not, please post all your code .Here is my code:
     
    The Code:

    //Links
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    //Script
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    //code Sesion
    <section id="DEPTS" class="two" style="height:auto">
            <header>
                <h2>Company Department's</h2>
            </header>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div class="container">
                <button type="button" class="icon fa-sitemap" data-toggle="modal" data-target="#myDeptModal" style="left: 0px; top: 0px; width: 270px; height: 70px; background-color: #DF554C; font-weight: bold; font-size: medium;"> Add Department</button>
    
                <div class="modal fade" id="myDeptModal" role="dialog">
                    <div class="modal-dialog">
    
                        <div class="modal-content">
                            <div class="modal-header">
    
                                <button type="button" class="icon fa-close" style="background-color: #DF554C; font-weight: bold; font-size: x-small;" data-dismiss="modal">&nbsp;&nbsp; Add Department's</button>
                            </div>
                            <div class="modal-body">
    
                                <asp:Label ID="DeptName" runat="server" Text="Department Name"></asp:Label>
                                <asp:TextBox ID="Deptnametxt" runat="server"></asp:TextBox>
                                <br />
    
                                <asp:Button ID="DeptUpload" runat="server" Text=" Dept Upload" OnClick="DeptUpload_OnClick" style="background-color: #DF554C; font-weight: bold; font-size: medium;" class="icon fa-upload" />
                            </div>
                            <div class="modal-footer">
                                <button type="button" style="background-color: #DF554C; font-weight: bold; font-size: medium;" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <asp:GridView ID="ViewDeptDG" runat="server" CssClass="mydatagrid" PagerStyle-CssClass="pager" HeaderStyle-CssClass="header" RowStyle-CssClass="rows" AllowPaging="True" OnItemDataBound="Item_Bound">
                <Columns>
                    <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </section>
    

    The Result:
     
    Best Regard,
    Sam

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 18, 2019 7:16 AM
  • User-1901014284 posted

    Thank you samwu,

    I looked through my CSS and JS and could not see anything there also so I created another Master page for these pages and this was no longer an issue.

    Thank you very much for your help.

    Jonny

    Tuesday, April 23, 2019 9:15 AM