时间戳

首页 > 解决方案 > 在某个按钮单击时不显示弹出模式

javascript - 在某个按钮单击时不显示弹出模式

问题描述

我不希望模态弹出窗口在某个按钮上展开，单击 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!");
}

但是 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 可防止按钮重定向。

标签： javascriptasp.netwebforms

解决方案

在通过你的代码笔之后，我认为这将帮助你实现你所寻求的。

替换此代码

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

推荐阅读