Do not display popup modal on a certain button click

Question

I do not want the modual popup to expand on a certain button click a PageContent_btnContractDiagnostico + incrementalNumber.

Here is the exemple I am followin https://codepen.io/PavelStrashevskiy/pen/JJRObL I have changed the following code

        <div class="content">Task Content...
     <button onclick="myFunction()">Click Me!</button>

add I have added the following code in the java-script section

     function myFunction() {
      alert("Hello! I am an alert box!");
}

But insted of alert("Hello! I am an alert box!"); I want the function to prevent the popup from opening.

This my actual code

Here is how my button is generated.

 LinkButton btnContract = new LinkButton();
            btnContract.OnClientClick = "return check()";
            btnContract.Attributes.Add("class", "task-text");
            btnContract.ID = "btnContract" + i_contractColumn.stepColumnName + i_contractColumn.contractTasks.IndexOf(contract_task);
            btnContract.Click += new EventHandler(contract_Click);
            btnContract.Text = contract_details.numero_contrato;
            taskContent.Controls.Add(btnContract);

Here is how the rest of my kanban is generated.

 public void PopulateKanban()
    {
        foreach (contractStepColumn i_contractColumn in kanban.kanbanBoard)
        {
            match_collapsedHeaders_with_view(i_contractColumn, kanban.kanbanBoard.IndexOf(i_contractColumn));
        }

        // KanbanBoard is the list of relevant columns for this page
        foreach (contractStepColumn i_contractColumn in kanban.kanbanBoard)
        {
            // Display the header of a given column
            //  match_columnHeaders_with_view(i_contractColumn, kanban.kanbanBoard.IndexOf(i_contractColumn));

            System.Web.UI.HtmlControls.HtmlGenericControl columnInKanban = new System.Web.UI.HtmlControls.HtmlGenericControl("li");
            columnInKanban.Attributes.Add("ID", "kanbanColumnID" + kanban.kanbanBoard.IndexOf(i_contractColumn));  // + kanban.kanbanBoard.IndexOf(i_contractColumn);
            columnInKanban.Attributes.Add("class", "drag-column drag-column drag-column-step");

            kanbanBoardHtml.Controls.Add(columnInKanban);

            System.Web.UI.HtmlControls.HtmlGenericControl columnSpan = new System.Web.UI.HtmlControls.HtmlGenericControl("span");
            columnSpan.ID = "kanbanColumnSpan" + kanban.kanbanBoard.IndexOf(i_contractColumn);
            columnSpan.Attributes.Add("class", "kanban-column-header");
            columnInKanban.Controls.Add(columnSpan);

            Label ColumnStepName = new Label();
            ColumnStepName.Text = i_contractColumn.stepColumnName;
            columnSpan.Controls.Add(ColumnStepName);
        ImageButton collapseImage = new ImageButton();
        collapseImage.ImageUrl = "~/images/minimize.png";
        collapseImage.Height = 20;
        collapseImage.Width = 20;
        collapseImage.Attributes.Add("class", "second-menu-icon");
        collapseImage.OnClientClick = "hideFunction"+ (kanban.kanbanBoard.IndexOf(i_contractColumn)).ToString() + "(); return false;";
        columnSpan.Controls.Add(collapseImage);

        // Display all contracts of a given column
        System.Web.UI.HtmlControls.HtmlGenericControl columnContractList = new System.Web.UI.HtmlControls.HtmlGenericControl("ul");
        //columnContractList.ID = "columnContractList" + kanban.kanbanBoard.IndexOf(i_contractColumn);
        columnContractList.Attributes.Add("class", "drag-inner-list");
        columnInKanban.Controls.Add(columnContractList);

        foreach (contractTask contract_task in i_contractColumn.contractTasks)
        {
            //        match_contractTask_with_view(contract_task, i_contractColumn.contractTasks.IndexOf(contract_task));

            string txtUrgencyColor = "";

            contrato contract_details = new contrato(contract_task.contract_id, 1);

            System.Web.UI.HtmlControls.HtmlGenericControl ColumnContainingTasks = new System.Web.UI.HtmlControls.HtmlGenericControl("li");
            columnContractList.Controls.Add(ColumnContainingTasks);

            System.Web.UI.HtmlControls.HtmlGenericControl dragBox = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            dragBox.Attributes.Add("class", "dragBox");

            ColumnContainingTasks.Controls.Add(dragBox);

            System.Web.UI.HtmlControls.HtmlGenericControl task = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            task.Attributes.Add("class", "task");
            task.Attributes.Add("id", "task"+ (kanban.kanbanBoard.IndexOf(i_contractColumn)).ToString());
            task.Attributes.Add("onclick", "expandCard(this, event)");

            dragBox.Controls.Add(task);

            System.Web.UI.HtmlControls.HtmlGenericControl taskMini = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            taskMini.Attributes.Add("class", "cardMini");

            task.Controls.Add(taskMini);

            txtUrgencyColor = contract_task.getColor().ToString();

            switch (txtUrgencyColor)
            {
                case "Color [Green]":
                    txtUrgencyColor = "header color-green";
                    break;
                case "Color [Red]":
                    txtUrgencyColor = "header color-red";
                    break;
                case "Color [Yellow]":
                    txtUrgencyColor = "header color-yellow";
                    break;
                case "Color [Orange]":
                    txtUrgencyColor = "header color-orange";
                    break;
                default:
                    txtUrgencyColor = "header color-silver";
                    break;
            }

            System.Web.UI.HtmlControls.HtmlGenericControl taskMiniHeaderColor = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            taskMiniHeaderColor.Attributes.Add("class", txtUrgencyColor);

            taskMini.Controls.Add(taskMiniHeaderColor);

            System.Web.UI.HtmlControls.HtmlGenericControl taskContent = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            taskContent.Attributes.Add("class", "content");

            taskMini.Controls.Add(taskContent);

            LinkButton btnContract = new LinkButton();
            btnContract.Attributes.Add("class", "task-text");
            btnContract.ID = "btnContract" + i_contractColumn.stepColumnName + i_contractColumn.contractTasks.IndexOf(contract_task);
            btnContract.Click += new EventHandler(contract_Click);
            // btnContract.Text = contract_task.contract_number;
            btnContract.Text = contract_details.numero_contrato;
            taskContent.Controls.Add(btnContract);

            System.Web.UI.HtmlControls.HtmlGenericControl emptyDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            taskContent.Controls.Add(emptyDiv);

            System.Web.UI.HtmlControls.HtmlGenericControl calenderSection = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            calenderSection.Attributes.Add("class", "contractCalendarSection");

            emptyDiv.Controls.Add(calenderSection);

            Image imgCalendarTask = new Image();
            imgCalendarTask.Height = 25;
            imgCalendarTask.Width = 25;
            imgCalendarTask.ImageUrl = "~/images/calendar.png";
            calenderSection.Controls.Add(imgCalendarTask);

            System.Web.UI.HtmlControls.HtmlGenericControl calendarText = new System.Web.UI.HtmlControls.HtmlGenericControl("p");
            calendarText.Attributes.Add("class", "task-calendar-text");
            calendarText.InnerText = dateConverter(contract_task.start_date.ToString());
            emptyDiv.Controls.Add(calendarText);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopup = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            expandPopup.Attributes.Add("class", "cardFull");
            task.Controls.Add(expandPopup);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupHeaderColor = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            expandPopupHeaderColor.Attributes.Add("class", txtUrgencyColor);
            expandPopup.Controls.Add(expandPopupHeaderColor);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupHeaderText = new System.Web.UI.HtmlControls.HtmlGenericControl("p");
            expandPopupHeaderText.Attributes.Add("class", "popupHeader");
            expandPopupHeaderText.InnerText = contract_task.contract_number;
            expandPopup.Controls.Add(expandPopupHeaderText);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupTextContent = new System.Web.UI.HtmlControls.HtmlGenericControl("div");
            expandPopupTextContent.Attributes.Add("class", "popupText");
            expandPopup.Controls.Add(expandPopupTextContent);

            System.Web.UI.HtmlControls.HtmlGenericControl contractStartDate = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            contractStartDate.InnerText = PoppupLineTextBuilder("Fecha de Llegada", contract_details.historial.arrivalDate().ToShortDateString() );
            expandPopupTextContent.Controls.Add(contractStartDate);

            System.Web.UI.HtmlControls.HtmlGenericControl StepDeadline = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            StepDeadline.InnerText = PoppupLineTextBuilder("Fecha Plazo", contract_details.historial.currentStep().deadline.ToShortDateString());
            expandPopupTextContent.Controls.Add(StepDeadline);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupTextHeaderOne = new System.Web.UI.HtmlControls.HtmlGenericControl("p");
            expandPopupTextHeaderOne.InnerText = "Información técnica";
            expandPopupTextContent.Controls.Add(expandPopupTextHeaderOne);

            System.Web.UI.HtmlControls.HtmlGenericControl componentFamily = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            componentFamily.InnerText = PoppupLineTextBuilder("Familia", contract_details.familia);
            expandPopupTextContent.Controls.Add(componentFamily);

            System.Web.UI.HtmlControls.HtmlGenericControl componentBrand= new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            componentBrand.InnerText = PoppupLineTextBuilder("Marca", contract_details.marca);
            expandPopupTextContent.Controls.Add(componentBrand);

            System.Web.UI.HtmlControls.HtmlGenericControl componentType = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            componentType.InnerText = PoppupLineTextBuilder("Tipo", contract_details.tipo);
            expandPopupTextContent.Controls.Add(componentType);

            System.Web.UI.HtmlControls.HtmlGenericControl componentSerial = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            componentSerial.InnerText = PoppupLineTextBuilder("Serial", contract_details.serial_number);
            expandPopupTextContent.Controls.Add(componentSerial);

            System.Web.UI.HtmlControls.HtmlGenericControl expandPopupTextHeaderTwo = new System.Web.UI.HtmlControls.HtmlGenericControl("p");
            expandPopupTextHeaderTwo.InnerText = "Información al cliente";
            expandPopupTextContent.Controls.Add(expandPopupTextHeaderTwo);

            System.Web.UI.HtmlControls.HtmlGenericControl clientName = new System.Web.UI.HtmlControls.HtmlGenericControl("pre");
            clientName.InnerText = PoppupLineTextBuilder("Cliente", contract_details.cliente.nombre_cliente);
            expandPopupTextContent.Controls.Add(clientName);

            Button btnMoreDetails = new Button();
            btnMoreDetails.Attributes.Add("class", "btnPopup");
            btnMoreDetails.ID ="btnContractPopup" + i_contractColumn.stepColumnName + i_contractColumn.contractTasks.IndexOf(contract_task);
            btnMoreDetails.Text = "Más Detalles";
            btnMoreDetails.Attributes.Add("runat", "server");
            btnMoreDetails.Click += new EventHandler(this.open_contract_click);
            expandPopup.Controls.Add(btnMoreDetails);

            System.Web.UI.HtmlControls.HtmlGenericControl LineBreak1 = new System.Web.UI.HtmlControls.HtmlGenericControl("br");
            System.Web.UI.HtmlControls.HtmlGenericControl LineBreak2 = new System.Web.UI.HtmlControls.HtmlGenericControl("br");

            expandPopupTextContent.Controls.Add(LineBreak1);
            expandPopupTextContent.Controls.Add(LineBreak2);
        }
    }
}

Here is part of the html generated

    <div class="task" id="task0" onclick="expandCard(this, event)"><div class="cardMini">
<div class="header color-red"></div><div class="content">
<a id="PageContent_btnContractDiagnostico0" class="task-text" href="javascript:__doPostBack('ctl00$PageContent$btnContractDiagnostico0','')">19050001</a>
<div>
<div class="contractCalendarSection"><img src="../images/calendar.png" style="height:25px;width:25px;"></div>
<p class="task-calendar-text">5/26/2019</p></div></div></div>
<div class="cardFull">
<div class="header color-red"></div>
<p class="popupHeader">19050001</p><div class="popupText"><pre>Fecha de Llegada:           5/2/2019</pre><pre>Fecha Plazo:                5/31/2019</pre><p>Información técnica</p><pre>Familia:                    Tarjeta</pre><pre>Marca:                      Texas</pre><pre>Tipo:                       Amp</pre><pre>Serial:                     244e2</pre><p>Información al cliente</p><pre>Cliente:                    Junior Cortenbach</pre><br><br><br><br></div><input type="submit" name="ctl00$PageContent$btnContractPopupDiagnostico0" value="Más Detalles" id="PageContent_btnContractPopupDiagnostico0" class="btnPopup" runat="server"></div></div>

Here is a visual representation of the were I dont want the popup to expand.

The reason is when the user clicks on that button it redirects directly to the detailed page so there is no need to show the popup. The javascript I have tried with check prevents the button from redirecting.

To get all your elements where no modal has to be shown, give them a dynamically generated tag or id. Then you can simply `return false`. in the `ShowModalPopup` for all those elements. A better solution, IMO, is to not call the function in the HTML click attribute. — M M, Aug 01 '19 at 08:09
This thread will help you - https://stackoverflow.com/questions/7347786/html-anchor-tag-with-javascript-onclick-event — M M, Aug 02 '19 at 05:46
It is not a rea html it is generated in code behind with asp.net. The is actually a LinkButton sorry for the confusion. — J.C, Aug 02 '19 at 13:27
The cleaner way is to create two functions - one that simply returns false on click, and other that actually shows the popup. I can see in your updated code you have a way of dynamically generating IDs. Can you figure out which IDs do not need to show popup and which need to show? Then simply call a suitable method to show popup or just return false. — M M, Aug 03 '19 at 06:05
I have added the rest of the code wish generates the kanban I have very little knowledge of javascript. I only want the LinkButton not to expand the popup. But am unsure how to do it in javascript. — J.C, Aug 03 '19 at 14:42
I have added the tutorial I am following witch will make it easier for you to see how my code works. — J.C, Aug 07 '19 at 23:27

score 1 · Accepted Answer · answered Aug 08 '19 at 18:36

1

After going through your codepen, here is what I think will help you achieve what you are seeking.

Replace this code

<div id="task1" class="task" onclick="expandCard(this, event)">

with this code

<div id="task1" class="task" onclick="newWindow('www.google.com')">

and create a new function in your JS code as below

function newWindow(url){
  window.open(url);
}

The idea is to create two functions - one for when you want to open the popup and another when you want to redirect to a new url. If you want a third option which does nothing, create a third function similar to the above and simply return false from the function. E.g.

function doNothing(){
  return false;
}

answered Aug 08 '19 at 18:36

M M

655
1
7
16

Thank you thank you It is almost what I want. However when I try it in code pen and I click on the button it redirects to other url which is what I want but it still opens the popup. – J.C Aug 08 '19 at 19:19
1

Here is your code edited to demonstrate above changes https://codepen.io/maloomadhur/pen/wvwMLWx – M M Aug 14 '19 at 12:10
I am sorry but it is not want I want I want a button inside Task Content... that dosent open the popup but the rest of the div should still open the popup on click. – J.C Aug 14 '19 at 13:21
Thank you very much for all your help I figured out i needed to add event.stopPropagation(); in the button – J.C Aug 20 '19 at 17:33

Do not display popup modal on a certain button click

1 Answers1