Buy Questpond's video subscriptions on huge discount.
DotNetFunda.com
Online: 611
Home > Forums > ASP.NET >

How to create own custom button in model pop up

Posted by Shail under ASP.NET on 6/16/2014 | Points: 10 | Views : 1157 | Status : [Member] | Replies : 8
Write New Post | Search Forums | AnsweredResolved Posts | Un Answered Posts | Forums Home 
How to create model pop up like as
if user click on add cart then show pop up message in side continue shope and checkorder
plz help me
thanks



Reply | Reply with Attachment
Alert Moderator 

Responses

Posted by: Goud.Kv on: 6/16/2014 [Member] [MVP] Gold | Points: 25

Up
0
Down
Hello Shail,

You have to use JQuery to create such type of popups. Try the below Codes,

In Aspx Page, 

<body>

    <div id="panel">

      <input type="button" class="button" value="Cart" id="btn1" />

      <!--Popup Box-->

      <div class="dialog" id="myform">

        <form>

          <b>Cart Items</b> : <i>Fastrack Backpack</i> - 1299/-

          <div>

            <input type="button" value="Continue Shopping" id="btnOK" />

             <input type="button" value="Place Order" />

          </div>

        </form>

      </div>

    </div>

</body>


Include following JQuery, 

<script type="text/javascript">

        $(function () {

            $(".button").click(function () {

                $("#myform").show();

            });

            $("#btnOK").click(function () {

                $("#myform").hide();

            });

        });

</script>


And finally your CSS, 

.button{

  border:1px solid green;

  background:yellowgreen;

}

.button:hover{

  background:lightgreen;

}

.dialog{

  border:2px solid steelblue;

  border-radius:5px;

  padding:10px;

  background:lightblue;

  position:absolute;

  display:none;

}

.dialog label{

  display:inline-block;

  color:brown;

}

input[type=text]{

  border:1px solid #333;

  display:inline-block;

  margin:5px;

}

#btnOK{

  border:1px solid purple;

  background:lightpink;

  margin:5px;

}

#btnOK:hover{

  border:1px solid #000;

  background:#ffacac;

}


This works great !!!!!

Thanks & Regards,
Krishna

Shail, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Shail on: 6/16/2014 [Member] Starter | Points: 25

Up
0
Down
plz give suitable example

Shail, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Goud.Kv on: 6/16/2014 [Member] [MVP] Gold | Points: 25

Up
0
Down
I just modified my Above answer to make it even simplier.

Hope that touches you.

Thanks & Regards,
Krishna

Shail, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Shail on: 6/16/2014 [Member] Starter | Points: 25

Up
0
Down
Hello Goud Sir
when click cart pop up not open
plz Help me

Shail, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Shail on: 6/16/2014 [Member] Starter | Points: 25

Up
0
Down
<asp:ImageButton ID="imgtnadd" runat="server" ImageUrl="~/image
s/add-cart.png" CommandName="AddCart" />
if click in aad cart then show pop up and inside pop up two button place order and check
plz help me

Shail, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Goud.Kv on: 6/16/2014 [Member] [MVP] Gold | Points: 25

Up
0
Down
Have you tried the above.., It is working for me

If you want to include ImageButton, then give ImageButton's Id in JavaScript function as below, 

<script type="text/javascript">

        $(function () {

            $("#imgtnadd").click(function () {

                $("#myform").show();

            });

            $("#btnOK").click(function () {

                $("#myform").hide();

            });

        });

</script>


Thanks & Regards,
Krishna

Shail, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Shail on: 6/16/2014 [Member] Starter | Points: 25

Up
0
Down 
<div id="panel">

        <asp:ImageButton ID="imgtnadd" runat="server" ImageUrl="~/images/add-cart.png" CommandName="AddCart" />

      <!--Popup Box-->

      <div class="dialog" id="myform">

        <form>

          <b>Cart Items</b> : <i>Fastrack Backpack</i> - 1299/-

          <div>

            <input type="button" value="Continue Shopping" id="btnOK" />

             <input type="button" value="Place Order" />

          </div>

        </form>

      </div>

    </div>

and java script is.......... 
<script type="text/javascript">

     $(function () {

          $(".imgtnadd").click(function () {

              $("#myform").show();

           });

          $("#btnOK").click(function () {

              $("#myform").hide();

           });



     });

</script>

but add cart click not show

Shail, if this helps please login to Mark As Answer. | Alert Moderator
Posted by: Goud.Kv on: 6/16/2014 [Member] [MVP] Gold | Points: 25

Up
0
Down
Hello Shailendra,

Now replace your code with below code. 
<body>

    <form runat="server">

        <div id="panel">

        <asp:ImageButton Id="imgtnadd" runat="server" ImageUrl="~/images/add-cart.png" CommandName="AddCart" />

        <!--Popup Box-->

        <div class="dialog" id="myform">

            <div>

                <b>Cart Items</b> : <i>Fastrack Backpack</i> - 1299/-

          <div>

              <input type="button" value="Continue Shopping" id="btnOK" />

              <input type="button" value="Place Order" />

          </div>

            </div>

        </div>

    </div>

    </form>

</body>


And JavaScript to, 
<script type="text/javascript">

        $(function () {

            $("#imgtnadd").hover(function () {

                $("#myform").show();

            });

            $("#btnOK").click(function () {

                $("#myform").hide();

            });

        });

</script>


It is working for me and works for you aswell...

Thanks & Regards,
Krishna

Shail, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response

Latest Posts