Reusing Bootstrap Modal Popup in Content Page using jQuery

Last Reply 9 months ago By pandeyism

Posted 9 months ago

Hi,

I created a bootstrap modal popup for one of the asp.net content page. How do i reuse the same model in all the other content pages without rewriting code in all the pages?

Posted 9 months ago

I am checking it, I will get back to you soon.


Posted 9 months ago

Hi manionasp,

Write the modal popup in Master page to show modal popup on multiple content page.

Please refer below sample.

HTML

MasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <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>
        <link type="text/css" rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
            media="screen" />
        <input type="button" id="btnShowLogin" class="btn btn-primary" value="Login" />
        <script type="text/javascript">
            $(function () {
                $("#btnShowLogin").click(function () {
                    $('#LoginModal').modal('show');
                });
            });
        </script>
        <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="ModalTitle"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="ModalTitle">
                            Login</h4>
                    </div>
                    <div class="modal-body">
                        <label for="txtUsername">
                            Username</label>
                        <asp:TextBox ID="txtUsername" runat="server" CssClass="form-control" placeholder="Enter Username"
                            required />
                        <br />
                        <label for="txtPassword">
                            Password</label>
                        <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" CssClass="form-control"
                            placeholder="Enter Password" required />
                        <div class="checkbox">
                            <asp:CheckBox ID="chkRememberMe" Text="Remember Me" runat="server" />
                        </div>
                        <div id="dvMessage" runat="server" visible="false" class="alert alert-danger">
                            <strong>Error!</strong>
                            <asp:Label ID="lblMessage" runat="server" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnLogin" Text="Login" runat="server" Class="btn btn-primary" />
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Default.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>

Dafault2.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>

Screenshot


Posted 9 months ago

can you share the code behind for the masterpage with login events?

 


Posted 9 months ago

Hi manionasp,

You can not ask multiple queries within a question. This is against forum rules and necessary to maintain clean forum.
It is requested. Mark Answer the replies when question is answered and ask a new question as a responsible member to help fellow programmers around the world.
Note: If you don't mark answers, people will loose interest in your questions.

Other Questions you have asked should be asked separately as per the rules of the site. It means a Question should be isolated, you can ask for single Information, issue or error and like so whatever else than this you may ask in separate Queestion.