ASP.Net , Javascript modal keeps dissapearing before I want it to

Question

Hi I am trying to pop a modal up when I click a button. The modal appears and disappears in a split second before I could use it to collect data. I am using asp.Net controls and Javascript to pop up the modal.

Below is the code for the modal

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Shows.aspx.cs" Inherits="BeanJJ.Shows" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> Your BEANJJ shows

    <p class="expressions">ADD, UPDATE or DELETE shows in  this management panel</p>
    <br />
    <button class="add-show"><span style="color:cornflowerblue; font-size:2rem;">&#43;</span> <%--Add Show--%></button><%--//yet to fix class names--%>
    <button class="add-show"><span style="color:darkseagreen;font-size:2rem">&infin;</span> <%--Update Show--%></button>
    <button class="add-show"><span style="color:red;font-size:2rem;">&#8259;</span><%--Delete Show--%></button>
    <br />
    <div class="addshow hidden">
        <p class="expressions">Enter the details of the show and save.</p>
    <br />
    <label for="email">Show name</label>
    <input type="text" runat="server" id="showname" name="showname" placeholder="Show name" />
    <br />
    <label for="platform">Platform</label>
    <input type="text" runat="server" id="platform" name="platform" placeholder="Amazon/Netflix/HBO...etc"  />
    <br />
    <label for="partswatched">Parts Watched</label>
    <input type="text" runat="server" id="seasonswatched" name="seasonswatched" placeholder="Number of seasons watched" />
    <br />
    <label for="Note">Note</label>
    <input type="text" runat="server" id="note" name="password" placeholder="Optional note" />
    <br />
    <label for="Completed">Whole show watched/</label>
    <input type="text" runat="server" id="completed" name="completed" placeholder="Have you completed the show?" oninvalid="setCustomValidity('Enter number of seasons watched !!')" />
    <br />
    <label id="lblerror" name="lblerror" class="info" runat="server"></label>
    <br />
        </div>
    <div class="overlay hidden"></div>
</fieldset>

</asp:Content>

And below is the JS for the code:

'use strict';
const addshow = document.querySelector('.add-show');
const modal = document.querySelector('.addshow');
const overlay = document.querySelector('.overlay');

//function for showing overlay to blur background when modal pops up
const showOverlayToBlurBackground = function () {
    overlay.classList.remove('hidden');
}

//function to show modal pop ups will be used by more than one modal so it could be refined after I learn more JS

const showModal = function () {
    modal.classList.remove('hidden');
    showOverlayToBlurBackground();
}

addshow.addEventListener('click', showModal);

Answer 1

Well, when it NOT required to write code to have a click event? (seems kind of funny to write code to get code to work!!!).

When using jQuery.UI dialogs, bootstrap dialogs, sweetalert, and the 1000+ other dialog systems out there?

Well, if your button has a post back, then the dialog will display, but only flash by, since with a post-back the web page travels op to the server, page is processed, and then the WHOLE page is send back to to the client side. Thus the whole page re-plots, the displays, and then JavaScript starts running (if you have any that supposed to run). So, in effect, your WHOLE page is quite much starting over from scratch with a post-back.

So, dump this auto magic go around find a button, add some click event to that button:

 addshow.addEventListener('click', showModal);

Get rid of above, and ONLY EVER use the above approach to add a click even when you crossed the desert, lost your family, are starving to death, and you have exhausted EVER OTHER possible choice on planet earth. Now, as I stated, it ok to use code to add click events, but ONLY AFTER you exhausted EVERY other possible road. Using code to attach click events to other bits and part on your page WHEN you don't need to? Then just don't.

Ok, so now lets take that button, and ensure that it does not post-back:

Say, like this

<button class="add-show"
    onclick="showModal();return false">
    <span style="color:cornflowerblue; font-size:2rem;">&#43;</span> 
</button>

So, by adding the return=false, then the button does not post-back, and you popup or whatever you have should work.

Also, note how nice it is to look at the button, and SEE and KNOW and have RIGHT in front of your eyes what the click event does? Sure seems better then having to trudge though all the markup, and then more js code, and buried somewhere in there we attach a click event? Good luck trying to maintain that code in a few years!!

On the other hand, I strong, and in fact BEYOND strong suggest you adopt a standard dialog system. Either bootstrap ones, or jquery.UI or at the very least make a choice.

I personal prefer jquery.UI dialogs. They don't look great (in fact close to ugly), but they just work, work great. , but they well, work well, and tend to be far easier to setup then bootstrap ones.

So, assuming jquery, and jquery.UI. Then our show model pop would be this:

Well, lets add a new function:

So, say this:

<button class="add-show"
    onclick="showModal2();return false">
    <span style="color:cornflowerblue; font-size:2rem;">&#43;</span> 
</button>

and now our dialog:

Just give your div a id, say like this:

<div id="mycooldialog" style="display:none" >
    <p class="expressions">Enter the details of the show and save.</p>
<br />
<label for="email">Show name</label>

etc. etc. etc.

And now our jquery.UI pop function:

<script>

    function showModal2() {
        alert('start')
        var mydiv = $("#mycooldialog")
        mydiv.dialog({
            modal: true, appendTo: "form",
            title: "My Title in title bar", closeText: "",
            width: "400px"
        });
    }

And now we have/see this:

So, adopt a standard pop dialog - you get a consistent look, but more so get a library that you can use over and over.