Use uglipop.js inside .net form

Larry Brister
Larry Brister used Ask the Experts™
on
My code below is on a .aspx page.

The test1 button works fine as long as I place it outside the form tag
Button pops just fine

But it opens and closes when the button is placed inside the form tag... not really a problem because what I want to do is use a .net button inside the form tag

Then... on .Net button click
I run some code...
And execute the custom1(); from server side.

Here is all the code
HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>
<html>
<head>
    <title>HTML, CSS and JavaScript demo</title>
    <script src="https://cdn.jsdelivr.net/npm/uglipop@1.0.0/uglipop.js"></script>

    <style>
        .put {
            border-radius: 10px;
            background-color: white;
            width: 300px;
            height: 300px;
            padding: 10px;
            -webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
        }
    </style>
</head>
<body>
    <!-- Start your code here -->
    <form id="form1" runat="server">

        <p class="lw">Hello Weaver!</p>
        <asp:Button ID="btnClick" runat="server" Text=".Net Buttone" OnClick="btnClick_Click" />

    </form>
    <p>
        <button class="button-blue" id="test1" runat="server" onclick="custom1();">Try it</button><br />
        <br />
    </p>
    <script>
        var custom1 = function () {
            uglipop({
                class: 'put', //styling class for Modal
                source: 'html',
                content: '<div> All HTML goes here </div>'
            });
        }
    </script>
</body>
</html>

Open in new window



C#
    protected void btnClick_Click(object sender, EventArgs e)
    {
      //some code... blah blah blah
     //execute the custom1(); here
    }

Open in new window

And call the custom1(); script
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Software Team Lead
Commented:
I'm using the codes below to do that.

1. in your front end, add jQuery include in the <head> tag section:

<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>

Open in new window


2. then your code behind:

protected void btnClick_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "script", "$(document).ready(function () { custom1(); });", true);
        } 

Open in new window

Larry Bristersr. Developer

Author

Commented:
Perfect! Thanks. Please watch for new question

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial