I need to implement a pop up window on clicking one link.
My HTML Code snippet:
<head>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/stylesheets/script.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
</head>
<body style="overflow-x:hidden">
<!--Header-->
<div id = "header">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kanbannew">Welcome</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Card</li>
<li>Project Status</li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="myModal" class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$('#myModal').on('show.bs.modal', function (event) {
var li = $(event.relatedTarget) // Button that triggered the modal
var recipient = li.data('whatever') // Extract info from data-* attributes
var modal = $(this)
modal.find('.modal-title').text(recipient)
})
</script>
</body>
Clicking on 'Add Card' button of the header, I want to show a pop up where user can input some title and description and submit the same. But this sample modal is not even opening. Any advice? Thanks.
Your data-target="#myModal" is referring to a <div> that should have an id='myModal'
Hence change this line
<div class="modal fade">
to
<div id="myModal" class="modal fade">
and it should work.
Note: You are missing the bootstrap.css file.
Update:
you should load jQuery first. Remove your scripts and links and load it in this manner:
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.css' />
<link rel='stylesheet' href='/stylesheets/bootstrap-theme.min.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
</script>
<script type="text/javascript" src="/stylesheets/script.js"></script>
Follow this pattern. Your style sheet should always be above your JS script.It is a good practice and a right way to place style sheet in the head section. Your Jquery core file should always be the first JS file to load as the Page is called which binds all the rest of your JS files. Try these files in similar pattern and remove all the other head files for now. click here for example http://www.bootply.com/Zdq6rSSvUs
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Related
I am receiving error when I clicked the button to trigger the modal bootstrap. I know I should be able to open and close the modal without any additional javascript.
Index.cshtml
<button class="rectangle-button-lg button-grey" data-bs-toggle="modal" data-target="#normalModal">Normal</button>
<div class="modal fade" id="normalModal" tabindex="-1" aria-labelledby="normalModal" aria-describedby="Normal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ref-modal-header">
<button type="button" class="close"
data-dismiss="modal">
×
</button>
<h4 class="modal-title ref-modal-title">
Please Read!
</h4>
</div>
<div class="modal-body ref-modal-body">
<p>Before you start please ensure to following the instructions</p>
</div>
</div>
</div>
</div>
_Layout.cshtml
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.13.1/r-2.4.0/datatables.min.js"></script>
<script src="~/lib/animate/wow.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
Change this...
<button class="rectangle-button-lg button-grey" data-bs-toggle="modal" data-target="#normalModal">Normal</button>
...to this.
<button class="rectangle-button-lg button-grey" data-bs-toggle="modal" data-bs-target="#normalModal">Normal</button>
in my Springboot system i need to have a javascript popup message to confirm delete when i select the delete button. However currently it deletes the record without poping up a confirmation message when i click the delete button.Can someone help me to solve this? Thank you.
Subject view Html file
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<!-- Nav Bar header code-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script type="text/javascript" src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script type="text/javascript" src="webjars/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{js/main.js}" src="../static/js/main.js"></script>
<link rel="icon" href="../../favicon.ico"/>
<link rel="stylesheet" href="webjars/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css "/>
<!-- Bootstrap core CSS -->
<link href="../static/css/bootstrap.css" rel="stylesheet" th:href="#{/css/bootstrap.css}"/>
<!-- End of Nav Bar header code-->
<link rel="stylesheet" type="text/css" href="static/css/view.css" th:href="#{/css/view.css}">
<meta charset="UTF-8">
<title>Subject Details</title>
</head>
<body>
<!-- Nav Bar body code-->
<div class="containerr">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
<!-- End of Nav Bar body code-->
<h1>Subject Details</h1>
<h2>Add a new Subject</h2>
<h2>Upload a CSV File</h2>
<div class="container" style="margin-top:30px">
<br><br>
<table border="1">
<thead>
<tr>
<th>Subject Code</th>
<th>Name</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr th:each="subject : ${subjectDetails}">
<td th:text="${subject.subjectCode}">Code</td>
<td th:text="${subject.name}">Name</td>
<td>
<a th:href="#{'/subject/edit/' + ${subject.id}}">Edit</a>
</td>
<td>
<a th:href="#{subject/delete/(id=${subject.id})}" class="btn btn-danger delBtn">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="myForm">
<div class="modal fade" id="myModal" 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">
<P class ="alert alert-danger">
Are you sure you want to delete?
</P>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
Delete
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="../static/js/bootstrap.js" th:href="#{/js/bootstrap.js}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
Subject Controller
#RequestMapping("/subject/delete")
public String deleteProduct(Long id){
subjectDAO.delete(id);
return "redirect:/subject";
}
main.js
$(document).ready(function () {
$('.table .delBtn').on('click',function (event) {
event.preventDefault();
var href=$(this).attr('href');
$('#myModal #delRef').attr('href',href);
$('#myModal').modal();
});
});
You can use an alert to confirm or cancel when you click the delete button.
function myFunction() {
var txt;
if (confirm("Want to delete!")) {
txt = "Deleted!";
// Do the delete when you click ok
} else {
txt = "Cancel!";
// If you click cancel, remove the alert box
}
console.log(txt);
}
---------home.html----------
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 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://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="main.js"></script>
<script src="aboutController.js"></script>
<script src="sharedDataService.js"></script>
<script src="sampleController.js"></script>
<script src="profileController.js"></script>
<div ng-app="myApp" ng-controller="aboutController">
<div class="col-md-8" style="text-align:center; width:190px; margin-top:160px;">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
<div class="col-md-10" style="text-align:center; margin-top:70px;" ng-view>
</div>
</div>
</html>
------main.js----------
angular.module("myApp", ["ngRoute"]).config(function($routeProvider) {
$routeProvider
.when("/go", {
templateUrl : "sample.html",
controller : "sampleController"
})
.when("/profile", {
templateUrl : "profile.html",
controller : "profileController"
})
.when("/modal", {
templateUrl : "modal.html"
})
.otherwise({
templateUrl : "profile.html",
controller : "profileController"
});
});
-------modal.html-------
<!-- Modal -->
<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-label="Close"><span aria-hidden="true">×</span></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>
I am creating a test app in angularjs. I am using Bootstrap modal which is supposed to open up when I click on "Messages" link in the home.html page.And routing also takes place on the click of that link but when I click on this link, routing takes place but Bootstrap modal doesn't open on first click on the link but when I click again on the link, it opens up. Can someone tell me why is this happening? And what's the fix for this?
I try to include datetimepicker to my modal form. My all codes working in another html page. But when I include those code to my own page after clicking to modal button a black blank page opening.
After spending hours I found out that when I excluded bootsrap.css file it working great. But i need bootsrap styles.
I try to find and delete modal and btn styles. But it does not change anything. The only solution excluding bootsrap.css.
<head>
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/touchTouch.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel='stylesheet prefetch' href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<link rel='stylesheet prefetch' href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2708/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="js/jquery.js"></script>
<script src="js/touchTouch.jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>
<script src="js/script.js"></script>
<script src="js/packery.pkgd.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if (gt IE 9)|!(IE)]><!-->
<script src="js/jquery.mobile.customized.min.js"></script>
<script src="js/wow.js"></script>
<script>
$(document).ready(function () {
if ($('html').hasClass('desktop')) {
new WOW().init();
}
});
</script>
<body>
<div class="item col-sm-3" >
<div class="in">
<div class="img">
<img src="images/arabalar/ekonomi/Dacia-SANDERO.png" width="100%"/>
</div>
<div class="name">
Dacia-SANDERO
</div>
<!-- Button to trigger modal -->
Launch demo modal
<!-- 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">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text"> </input>
<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2708/bootstrap-datetimepicker.min.js'></script>
<script src="js/index1.js"></script>
and the index1.js contain
$(function() {
$('#datetimepicker1').datetimepicker({
language: 'pt-BR'
});
});
These are all my linked Javascript files:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="bootstrap/docs/assets/js/jquery.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-transition.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-button.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-affix.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>
<script src="bootstrap/docs/assets/js/holder/holder.js"></script>
<script src="bootstrap/docs/assets/js/google-code-prettify/prettify.js"></script>
<script src="bootstrap/assets/js/application.js"></script>
These are all my linked CSS files:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/style.css" rel="stylesheet" media="all" />
And here is my Model:
<!-- Button to trigger modal -->
Launch demo modal
<!-- 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>
The problem that I am having is that when I click on the button to launch the Model it only pops up on my screen for 1 second then it disappears. For some reason it's not staying on the screen.
hey it is working fine for me. Jsfiddle demo
more over you only need to add any one of bootstrap.css or bootstrap.min.css.
actually bootstrap.min.css is just a compressed version of bootstrap.css.
you don't need to add all javascript files.
a basic example:
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" media="all" />
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<!-- Button to trigger modal -->
Launch demo modal
<!-- 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>
to test it, just copy the above code into a text-editor and save it as **.html, then just open it on some browser
I found out my problem. I needed to delete
<script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>
Guess you can't include the bootstrap.min.js