Incorrect Format Validation in AngularJS

Incorrect Format Validation in AngularJS - javascript

How can I show a modal popup on my save button that tells the format of the inputted data is incorrect?
This is my code for my input field:
<input class="inputs len_md" name="number" ng-model="myModel.text" required ng-pattern="/^(\d)+$/" / >
My button is as follow:
<button type="submit" class="button" Save</button><br><br><br>
My Modal popup is
<div class="modal-dialog">
<div class="modal-content" ng-hide="incorrect_format" id="incorrect_format">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">×</button>
<h6 class="modal-title" id="myModalLabel">Error</h6>
</div>
<div class="modal-body" >
<p><center>The format is incorrect.</center> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal" ng-click="cancel()">OK</button>
</div>
</div>
How can I display the popup on button click that checks the correct format validation? Im using angularjs btw. Thanks for any help

I just check validation from controller and show modal if it is wrong.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input class="inputs len_md" name="number" ng-model="myModel.text" required ng-pattern="/^(\d)+$/" / >
<button type="submit" class="button" ng-click="upd_check()">Save</button><br><br><br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">×</button>
<h6 class="modal-title" id="myModalLabel">Error</h6>
</div>
<div class="modal-body" >
<p><center>The format of Max UDP Connection is incorrect.</center> </p>
<p><center>Please enter a number from 0~65535.</center> </p>
<p><center>(0 means no limit)</center> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal" ng-click="cancel()">OK</button>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.upd_check = function(value)
{
var patt = new RegExp("/^(\d)+$/");
var res = patt.test(value);
if(!res)
{
$("#myModal").modal('show');
}
}
});
</script>
</body>
</html>

If I understand correctly, you are trying to show this pop-up only when the user enters information that is not a number between 0 - 65535.
For this, you first need to add an ng-click event to the button which runs a function with the mymodel.text variable as a parameter. The function will determine whether or not the user entered a number (most basic validator). This could look like:
var validator = function(mymodel.text){
if (mymodel.text === NaN){
incorrect_format = false;
}
}
And would be called by the button like:
<button ng-click = "validator()" type="submit" class="button" Save</button><br><br><br>
This would then change the condition of the variable to false and would result in the ng-hide function ceasing to execute and showing the modal pop-up.

Related

How to show already open date picker with pickadate.js in a modal?

enter image description here
Hey,
I am opening a modal on click the input field and i want the date-picker as an already open Calendar with an hidden input field. I have already tried autofocus on hidden input and trigger click event on input field but it is not going as per my expectations.
Please help me and give my some suggestions to resolve it.
Thanks in advance.

after the modal opens call its event. inside that event call picker.open().
run the snippet below for an example
var $input = $('.datepicker').pickadate();
var picker = $input.pickadate('picker');
$(window).on('shown.bs.modal', function() {
picker.open();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css">
<button type="button" id="buttonmodal" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modal-body">
<input type="text" class="datepicker" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Bootstrap 4 Modal js trigger not working?

I have a modal and I want to ask the user to authenticate before showing the modal (that overrides server files with the modal content).
I want the user to click on my editmodal button, to show a connection form and if it's the same as my json base64 encoded data the modal get shown.
My problem: I can't get my modal to be shown with any of those
$('#Modal').modal();
$('#Modal').modal('toggle');
$('#Modal').modal('show');
my code is :
<button id="buttonmodal" type="button" class="btn btn-primary" data-target="#exampleModal">
(i removed the data-trigger for i want to do it in js)
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style=" width: 600px;
height: 600px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button id="closebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
and my js is pretty simple for now :
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val(text);
$('#exampleModal').modal('show');
});
If ever you have tips or other way to do it, it would help a lot.

You are looking for id "Modal", while your component is using a class "modal" with an id "exampleModal". <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
To fix this you might want to change your code to:
$('.modal').modal();
$('.modal').modal('toggle');
$('.modal').modal('show');
or
$('#exampleModal').modal();
$('#exampleModal').modal('toggle');
$('#exampleModal').modal('show');
It all depends on how you would like to be finding your component.
Note: # is used for ids, while . for classes

Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button to Open the Modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> -->
<button type="button" class="btn btn-primary" id="buttonmodal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width: 600px; height: 600px;">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val("test 123");
$('#myModal').modal('show');
});
</script>
</body>
</html>

Ok i was dumb, the solution was : my css link where point on bootstrap 4.3 where my script was going on an older version so i had conflict version that wern't shown in the console.
Ty for those who helped

How to handle data-target value with special characters?

I am implementing one bootstrap pop-up. And I am putting some value with special characters in data-target. These value coming from DB, This pop-up implementing through loop.
I tried with w3school. How can I open pop-up with special characters.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my(Modal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="my(Modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If remove the ( then it will work. But these id is not my hand, these id coming from API.

You need to "escape" the special characters in the selector. This:
data-target="#my(Modal"
Should be:
data-target="#my\(Modal"
Or:
data-target="#my\000028Modal"
Your sample code with just one \ added:
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my\(Modal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="my(Modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>

You have to escape the special characters in order to let jQuery know that you want to use the character the way it is and it should not consider as a syntax error.
function escapeString(str) {
return (str + '').replace(/[\\"')(]/g, '\\$&').replace(/\u0000/g, '\\0')
}
// Add special characters here ^ -- after \\
// This allows single, and double quotes,
// opening, and closing parentheses.
Wrap your target value with the above function:
data-target="+ escapeString(targetValue) +"

<div ng-repeat="rule in ruleDetails">
<div>{{rule.name}} <i data-toggle="modal" data-target="#{{ rule.name }}"></i>
</div>
<div class="modal fade" id="{{ rule.name }}" tabindex="-1" role="dialog"></div>
</div>
I have special characters in rule.name for example: 'as-copy(1) from test data'
which is bounded with id attribute of bootstrap modal. By this UI modal or popup
is not opening and displayed rule name. Please help how to trim or escape
special characters here?

Twitter Bootstrap Modal - not appearing

I'm looking to use the twitter bootstrap modal functionality. As such I have copy pasted out of the docs and include all the files. But every time I click my button nothing appears and I'm not sure why:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery-1.10.2.js"></script>
<script type="js/bootstrap.js"></script>
</head>
<body style="background:#bf9d93;">
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
Now according to the docs, under the usage section I am allowed to simply use the code above and invoke the modal via the data attributes. As such this is my first time using the element so I'm sure its a silly thing I've over looked but I cant see what it is...

Check line 8 of your code. You have:
<script type="js/bootstrap.js"></script>
Instead of:
<script src="js/bootstrap.js"></script>
Without correctly loading the bootstrap.js file it won't work.

On click event call:
$('#myModal).modal({ show: true });

How to open a Bootstrap modal window using jQuery?

I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form.
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit"/>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
jQuery:
$('#myform').on('submit', function(ev) {
$('#my-modal').modal({
show: 'false'
});
var data = $(this).serializeObject();
json_data = JSON.stringify(data);
$("#results").text(json_data);
$(".modal-body").text(json_data);
// $("#results").text(data);
ev.preventDefault();
});

Bootstrap has a few functions that can be called manually on modals:
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
You can see more here: Bootstrap modal component
Specifically the methods section.
So you would need to change:
$('#my-modal').modal({
show: 'false'
});
to:
$('#myModal').modal('show');
If you're looking to make a custom popup of your own, here's a suggested video from another community member:
https://www.youtube.com/watch?v=zK4nXa84Km4

Most often, when $('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work.
Remove one of the links to make it work again.
Furthermore, some plugins cause errors too, in this case add
jQuery.noConflict();
$('#myModal').modal('show');

In addition you can use via data attribute
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
In this particular case you don't need to write javascript.
You can see more here: http://getbootstrap.com/2.3.2/javascript.html#modals

Just call the modal method(without passing any parameters) using jQuery selector.
Here is example:
$('#modal').modal();

If you use links's onclick function to call a modal by jQuery, the "href" can't be null.
For example:
... ...
Open a Modal by jQuery
... ...
... ...
<script type="text/javascript">
function openModal(){
$('#myModal').modal();
}
</script>
The Modal can't show.
The right code is :
Open a Modal by jQuery

Here is how to load bootstrap alert as soon as the document is ready. It is very easy just add
$(document).ready(function(){
$("#myModal").modal();
});
I made a demo on W3Schools.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#myModal").modal();
});
</script>
</body>
</html>

<script type="text/javascript">
$(function () {
$("mybtn").click(function () {
$("#my-modal").modal("show");
});
});
</script>

Try to use jQuery instead of $ sign when calling the function, it worked in my case as you can see below.
jQuery.noConflict();
jQuery('#myModal').modal('show');
jQuery.noConflict(); because when jQuery('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work. and it would resolve the problem in that case, as in my case it is repeating.
Further you can go to this link
Bootstrap Model Window Not Showing by Calling Through JQuery

Check out the complete solution here:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h
Make sure to put libraries in required order to get result:
1- First bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
(In other words jquery.min.js must be call before bootstrap.min.js)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

I tried several methods which failed, but the below worked for me like a charm:
$('#myModal').appendTo("body").modal('show');

Try
$("#myModal").modal("toggle")
To open or close the modal with id myModal.
If the above is not working then it means bootstrap.js has been overridden by some other js file.
Here is a solution
1:- Move bootstrap.js to the bottom so that it will override other js files.
2:- Make sure the order is like below
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>

<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit" id="submitButton"/>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
You can launch the modal with the code below this.
$(document).ready(function(){
$("#submitButton").click(function(){
$("#myModal").modal();
});
});

Try This
myModal1 is the id of modal
$('#myModal1').modal({ show: true });

Bootstrap 4.3 - more here
$('#exampleModal').modal();
<!-- Initialize Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- MODAL -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Hello world
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Try this. It's works for me well.
function clicked(item) {
alert($(item).attr("id"));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button onclick="clicked(this);" id="modalME">Click me</button>
<!-- Modal -->
<div class="modal" id="modalME" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS</h2>
× <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here.</p>
</div>
<div class="modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
</div>
<!-- /Modal -->

Develop Reference

JavaScript is the programming language of the Web.

Incorrect Format Validation in AngularJS - javascript

Related

How to show already open date picker with pickadate.js in a modal?

Bootstrap 4 Modal js trigger not working?

How to handle data-target value with special characters?

Twitter Bootstrap Modal - not appearing

How to open a Bootstrap modal window using jQuery?

Categories

Resources