Issue with ASP.Net: Bootstrap modal dialog box not displaying

I'm having an issue with a modal dialog box that isn't showing up when I click the button. Here is the code I have:

 <div class="form-group">
      <div class="row">
             <div class="col-sm-6">
                <a href="#" class="btn-link" class="btn-link" data-toggle="modal" data-target="#myModal"><asp:Button ID="btnSimpan" CssClass="btn btn-success" runat="server" Text="SIMPAN"  /></a>
               </div> 
      </div>              
 </div>

<div id="myModal" class="modal fade in" role="dialog">
    <div class="modal-dialog">
        <!-- Modal Content -->
        <div class="modal-content">
            <div class="modal-header" style="background-color:red;">
            <button type="button" class="close" data-dismiss="modal">&times</button>
                <h4 class="modal-title">Makluman</h4>
            </div>
            <div class="modal-body">
                <div role="form">
                    <div class="form-group">

                    <h4 class="modal-title">Adakah Anda Pasti ?</h4>
                    <div class="form-group">
                        <div class="row">

                            <div class="col-sm-6">
                                <span class="pull-right">
                                    <asp:Button ID="btnSubmit" CssClass="btn btn-success" runat="server" Text="Ya" /></span>
                            </div>
                            <div class="col-sm-6">
                                <span class="pull-left">
                                    <asp:Button ID="Button1" CssClass="btn btn-danger" runat="server" Text="Tidak" /></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The problem is evident in this output screenshot:

The output is here

I've checked various examples online and they all seem to be similar. I suspect there might be something missing in my code, or perhaps an error within it. Any advice or suggestions would be greatly appreciated.

javascriptasp.nettwitter-bootstrapmodal-dialogshowmodaldialog

Answer №1

What is the purpose of including the in class for a modal? This class is added when the modal is displayed. If the backdrop is visible but the modal is not, it may be due to missing closing div tags.

Furthermore, why use an Asp.Net server-side control like asp:Button to trigger the modal open function? Placing a button control within an anchor tag can lead to a postback event that refreshes the page.

An alternative approach is to utilize a simple anchor tag with a data-target attribute, as shown below:

<a href="#" class="btn-link" data-toggle="modal" data-target="#myModal" class="btn btn-success"></a>

If you prefer triggering the modal open function on an asp:button click event, you can use 

ScriptManager.RegisterStartupScript
as demonstrated in the code snippet below:

<asp:Button ID="btnSimpan" CssClass="btn btn-success" runat="server" OnClick="btnSimpan_Click" Text="SIMPAN"  />

c#

protected void btnSimpan_Click(object sender, EventArgs e)
{

    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "<script>$(function () {$('#myModal').modal('show');});</script>", false);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing the import name as a prop in React and combining it with the image src

I am struggling with a React component that has a prop being passed as an Import, which contains the path to an image. For this instance, the prop value is Ico1. The challenge lies in passing the prop in the img src attribute, like so: See the code belo ...

javascriptreactjs

I am interested in generating a Stacked Chart in Google Charts using data from a JSON file

Hey there, I'm looking to generate a stacked chart using JSON data in Google Charts. My current challenge revolves around the code snippet var data = google.visualization.arrayToDataTable([. <?php $tmp = array(); require "configdashboard.php"; /* ...

javascriptphpmysqljsonstacked-chart

iPad2 always displays UIWebView in 'portrait' orientation

I have a sophisticated HTML5 website that includes JavaScript. It is displayed in a UIWebView. The JavaScript on the page is supposed to determine whether the iPad is in Portrait or Landscape mode. Unfortunately, I have encountered an issue. Regardless of ...

javascriptiosuiwebview

How can I trigger a click event on a link using JQuery?

One of my links has the unique id: nyhedsklik There is a function associated with this link that activates when it is clicked: $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Fetching Popup ...

javascriptjquery

Using PHP/JavaScript to activate a button once the timer reaches 00:00

I came across a JavaScript fiddle code that is working perfectly. Here it is: HTML <div id="worked">00:05</div> JS $(document).ready(function (e) { var $worked = $("#worked"); function update() { var myTime = $worked.h ...

javascriptphp

Error message: "Uncaught TypeError: Cannot set property 'state' of undefined in ReactJS"

I am encountering an issue while trying to update the state within my React function. The error message I receive indicates: "Cannot read property 'setState' of undefined." Reviewed below is my code where I have initialized the state in the cons ...

javascriptreactjs

Transforming HTML into a Document Object Model (DOM) for manipulation within a Node

Is it possible to convert raw HTML into a DOM/NodeList object and manipulate elements within that NodeList before converting it back into a string? Here's an example: request( url, function ( err, response, body ) { var bodyDOM = DOM.parse( body ...

javascripthtmlnode.jsparsingdom

Storing chrome identity api responses in a Vue.js component can be achieved by creating a function

When passing the response from the Chrome Identity API to the tab running my Vue-powered Chrome extension, I encountered an issue in storing this information inside my Vue instance for use within a component. Despite trying to assign the info to a variable ...

javascriptvue.jsgoogle-chrome-extension

Implementing raw static HTML files in webpack: a step-by-step guide

Recently, I created a basic template called test.html <div>raw text with content</div> All I'm trying to achieve is to import the raw file without any alterations For example: require('./test.html'); // This should return "&l ...

javascripthtmlnode.jsnpmwebpack

Is it possible to utilize the glob method for refining a current collection of file paths?

Currently, I am utilizing glob to conduct file search operations in Node, along with glob patterns for an "ignore" list. However, my goal is to utilize only the ignore list to filter a current list of files (specifically changed files from git). Is there ...

javascriptnode.jsglob

The PHP script is not receiving the post parameters sent in the ajax request

Help Needed jQuery.ajax({ url: 'PHPdocs/appsearch.php', data: {term:'blub'}, type: "POST", async: true, data: "text", succes ...

javascriptphpjqueryajaxhttp-post

Uploading PDF files using PHP without the need for traditional input boxes

Currently, I am utilizing a JavaScript code to add annotations to a PDF document within the browser. Once I have completed adding annotations, I save the modified document on my device and then proceed to upload it using another form. However, my goal is ...

javascriptphp

Implementing validation and displaying fields with v-model in vue.js

Looking at this code snippet: <button type="button @click="editing=true">Edit</button> <form v-show="editing" @submit="onSubmit"> <textarea v-model="text"></textarea> </form> <div> Current value: {{text}} </ ...

javascriptformsvalidationvue.jsv-model

Upgrading password encryption from ASP.NET Identity 2.0 to 3.0

I currently have password hashes that were created using ASP.NET Identity 2.0. Can these passwords be authenticated using the latest version of ASP.NET Identity, which is 3.0? ...

asp.netasp.net-coreasp.net-identity

Node.js JSON parser encountering an unexpected undefined error

Whenever I attempt to JSON.parse the string, an error occurs and I receive this message: undefined:1 {"device":"FaclonTest","data":[{"tag":"LATITUDE","value":1903.5091},{"tag":"LONGITUDE","value":07251.0348}]} I'm unsure of where the mistake is. Can ...

javascriptjsonnode.js

The correct way to extract a jwt token from headers and integrate it into an express application

After successfully implementing both the frontend and backend in express.js with authentication and authorization using JWT, I have confirmed that the JWT token is being properly set upon login. You can see the auth-token key in the image below: https://i ...

javascriptnode.jsexpressjwtauthorization

What is the best way to conceal certain choices in a dropdown menu?

How can I display only the cities in Australia in a dropdown list? I have tried to find "Australia" in the options and hide everything before and after it, but I have been unsuccessful! Here is my fiddle. <select class="dropdown" id="dropdown"> ...

javascriptjqueryhtml

Feed JSON data into a jQuery function using JavaScript

A rudimentary Google Apps Script Web App has been created with the sole purpose of displaying JSON data in an HTML drop-down list. The JSON file is stored in Google Drive. Code inspiration taken from: http://jsfiddle.net/manoj_admlab/Mta5b/3/ However, we ...

javascriptjqueryhtmljsongoogle-apps-script

Display iframe as the initial content upon loading

Seeking solutions for loading an iframe using jQuery or Ajax and outputting the content to the page once it has been loaded. The challenge lies in loading an external page that may be slow or fail to load altogether, leading to undesired blank spaces on th ...

phpjavascriptjqueryhtmlajax

Struggling to extract specific data from a table using angular.js

My table includes Roman numerals (i.e. I, II, III, ......VIII) for filtering using Angular.js. However, I am facing an issue where the filtration process works for some values but not for others. Please review my code below: subject.html: <table cl ...

javascriptphpangularjsfilter