在某个按钮单击时不显示弹出模式答案

【问题标题】：Do not display popup modal on a certain button click在某个按钮单击时不显示弹出模式
【发布时间】：2019-07-31 23:21:00
【问题描述】：

我不希望模态弹出窗口在某个按钮上展开，单击 PageContent_btnContractDiagnostico + incrementalNumber。

这是我关注的例子https://codepen.io/PavelStrashevskiy/pen/JJRObL我已经更改了以下代码

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

添加我在java-script部分添加了以下代码

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

but insted of alert("你好！我是一个警告框！");我想要阻止弹出窗口打开的功能。

这是我的实际代码

这是我的按钮的生成方式。

 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);

这是我的看板其余部分的生成方式。

 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);
        }
    }
}

这里是生成的部分html

    <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>

这是我不希望弹出窗口展开的可视化表示。

原因是当用户单击该按钮时，它会直接重定向到详细页面，因此无需显示弹出窗口。我尝试使用检查的 javascript 可防止按钮重定向。

【问题讨论】：

要获取所有不需要显示模式的元素，请给它们一个动态生成的标签或 ID。然后你可以简单地return false。在所有这些元素的ShowModalPopup 中。 IMO 更好的解决方案是不在 HTML click 属性中调用该函数。
你能告诉我如何用我的代码做到这一点吗？
这个帖子会帮助你 - stackoverflow.com/questions/7347786/…
它不是真正的 html 它是在 asp.net 后面的代码中生成的。实际上是一个 LinkButton 很抱歉造成混乱。
更简洁的方法是创建两个函数——一个在点击时简单地返回 false，另一个实际显示弹出窗口。我可以在您更新的代码中看到您有一种动态生成 ID 的方法。你能弄清楚哪些 ID 不需要显示弹出窗口，哪些需要显示？然后只需调用一个合适的方法来显示弹出窗口或只返回 false。

标签： javascript asp.net webforms

【解决方案1】：

在完成你的 codepen 之后，我认为这将帮助你实现你的目标。

替换此代码

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

使用此代码

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

并在您的 JS 代码中创建一个新函数，如下所示

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

这个想法是创建两个函数 - 一个用于您想要打开弹出窗口时，另一个用于您想要重定向到一个新的 url。如果您想要第三个不执行任何操作的选项，请创建与上述类似的第三个函数，并从该函数中简单地 return false。例如

function doNothing(){
  return false;
}

【讨论】：

谢谢谢谢这几乎是我想要的。但是，当我在代码笔中尝试它并单击按钮时，它会重定向到我想要的其他 url，但它仍然会打开弹出窗口。
这是您编辑的代码以演示上述更改codepen.io/maloomadhur/pen/wvwMLWx
我很抱歉，但我不希望我想要一个按钮在任务内容中......这不会打开弹出窗口，但 div 的其余部分仍应在点击时打开弹出窗口。
非常感谢您的所有帮助我发现我需要添加 event.stopPropagation();在按钮中