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'
});
});
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 a bootstrap based webpage, I would like to have a dialog box/popup window that is displayed on top of the current page.
I have below codes:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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/4.1.3/js/bootstrap.min.js"></script>
<img href="#myModal" data-toggle="modal" src="https://minotar.net/helm/EpicMinerBackup">
<div id="myModal" class="modal fade" 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>
<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>
</div>
</div>
The problem is in the below part that destroys all the style of the web page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/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/4.1.3/js/bootstrap.min.js"></script>
If I do not insert them to the page, the modal does not work.
How is it possible to have this model working without affecting other parts of the page?
Or is there any other alternative way to achieve the same result on the page?
Thank you.
You need to enter this link tag for the CSS
<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">
and for the javascript, add this to your project before the closing body tag </body>
<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>
I have an input type="CheckBox" with an onclick function to launch a modal if the checkbox is clicked. But it will not launch the modal?
I inserted an alert(id); under the if statement & it did alert "chkfb", so I know the result is "TRUE", but the $('#Searchfb').modal(); will not work.
Added the scripts at the bottom of
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<script type="text/javascript">
function myCheckBoxFunction(id) {
var checkBox = document.getElementById(id);
if (checkBox.checked == true) {
$('#SearchFb').modal();
} else {}
}
</script>
<input id="chkFb" type="checkbox" onclick="myCheckBoxFunction(this.id);" />
<label for="chkFb"> Fb Services</label>
<!-- Modal -->
<div class="modal fade" id="Searchfb" 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>
<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>
</body>
https://getbootstrap.com/docs/4.0/components/modal/#modalshow
$('#Searchfb').modal('show');
The problem is you id name
<div class="modal fade" id="Searchfb" role="dialog">
Remember, the id name must be the same in you script
$('#SearchFb').modal('show');
So just need change for fb or Fb in the html or the js code. Happy code!
** I am new to javascript and willing to learn it on my own interest . I am unable to execute a bootstrap modal after 5 seconds to pop up on the page using setTimeout in javascript. I dont need it in Jquery. Please someone assist me on this **
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Task_1</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 main_div">
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Please click to watch the video again..</p>
<div class="popup_img">
<img src="images/alert.png">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setTimeout(function() {
$('#overlay').modal('show');
}, 12000);
</script>
</body>
</html>
Wrap around the $(function () {}) and change 12000 to 5000.
$(function() {
setTimeout(function() {
$('#overlay').modal('show');
}, 5000);
});
<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>
<div class="container main_div">
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Please click to watch the video again..</p>
<div class="popup_img">
<img src="//placehold.it/200x75?text=alert" />
</div>
</div>
</div>
</div>
</div>
</div>
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">