I used the example code of bootstrap and I used 2 css files and 1 js file.
Here is the code:
<html>
<head>
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
</body>
<html>
I don't know what I'm doing wrong I just want it to show the modal that I want.
Use this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm">
<div class="modal-content">
Hello World
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Related
I want user to fill the form and after filling it, if the form is compatible with Validations(there can't be a null value) I want to show user a "Successfull" notification. But in this code, when I click on save button , it doesn't check the validations even though I didn't fill the form but still pushes "Successfull" notification. How can check the validations in Javascript. What am I missing here because I'm terrible at Javascript?
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css />
<script defer src="~/js/site.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" asp-action="Create" id="form" >
<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control" id="Order" >
#Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="#Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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">
New product has been saved successfully.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
//function checkFormValidateOrNot() {
// if ($(".field-validation-error").length > 0) {
// return false;
// }
// $(".form-control").each(function () {
// if ($(this).attr("data-val") == "true" && $(this).val() == "" &&
// $(this).is("select") == false) {
// return false;
// }
// });
// return true;
//}
$("#btnSave").click(function () {
//if (checkValidateOrNot() == true) {
//}
$('#Modal1').modal('show');
});
})
})
</script>
</body>
1.You can use validate() method which exists in jquery.validate.js to validate the form.
2.It is better for you to use the default version bootstrap and jquery in wwwroot folder. Otherwise, the modal will not display due to the compatibility of the nuget packages.
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Whole working demo:
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css />
<script defer src="~/js/site.js"></script>
//modify here...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form method="post" asp-action="Create" id="form" >
<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control" id="Order" >
#Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="#Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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">
New product has been saved successfully.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$("#btnSave").click(function () {
var validator = $("#form").validate();
var flag = validator.form();
if (flag) {
$('#Modal1').modal('show');
}
});
})
})
</script>
</body>
I have a button with the code:-
<button type="button" name="btn-success" data-toggle="modal" data-target="#exampleModal" class="btn-success">Process</button>
with A Modal.
Now I want to change the button like this
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
And I want data-toggle="modal" data-target="#exampleModal"
to be executed in the function.
I tried
<script>
function myFunction(){
data-toggle="modal" data-target="#exampleModal";
};
</script>
But it didn't work. Can anyone teach me how to do that?
You can try this as your are using bootstrap.
<script>
function myFunction(){
$("#exampleModal").modal('toggle'); //see here usage
};
</script>
Your HTML
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
You are using bootstrap so better use modal('toggle')
function myFunction(){
$("#exampleModal").modal('toggle')
}
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
Working example
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style id="compiled-css" type="text/css">
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
function myFunction() {
$("#exampleModal").modal('show')
}
</script>
</head>
<body>
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
<div id="exampleModal" class="modal fade" 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>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
</body>
</html>
The materialize modal is not showing up even after i've followed the steps mentioned in the materialize documentation.
In the console, $(...) modal is not a function error occurs.
I've tried to rearrange the scripts download sequences but none of them seem to work
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com
/ajax/libs/materialize/1.0.0/css/materialize.
min.css">
<!-- Compiled and minified JavaScript -->
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger"
href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-
flat">Agree</a>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js
/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-
DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
</script>
</body>
<script>
$(document).ready(function () {
$('.modal').modal();
});
</script>
</html>
Modal should be displayed but isnt being displayed
Here is the working demo,
you need to import jquery before materialize.js
$(document).ready(function () {
$('.modal').modal();
});
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-
DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js
/materialize.min.js"></script>
<body>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger"
href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-
flat">Agree</a>
</div>
</div>
</body>
</html>
I'm currently a beginner in Bootstrap Modals. I just want to ask why the external URL is not appearing in the modal?
Here's an example about what I'm trying to do:
http://www.screencast.com/t/YLWJeAwkPK
Here is the whole HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Bootstrap 3 Modals with Remote URL</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript" charset="utf-8">
$('a.btn').on('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$(".modal-body").html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="'+url+'"></iframe>');
});
</script>
<body>
<a data-toggle="modal" class="btn" href="http://www.bing.com" data-target="#myModal">click me</a>
<div class="modal hide fade" id="myModal" 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>
</div>
</body>
</html>
The code came from http://jsfiddle.net/f2Fcd/. I've just copy and paste it and explore it. Does anyone know what's wrong with the code? Or maybe I've missed something? Thank you very much for your response. :)
Nothing happens when I press the button with the id test. I do get an error message in the debug of my console though that states:
ReferenceError: Can't Find variable '$'.
I believe this is a jQuery error, but I already have it imported. Here's the code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.18.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
<title>Panic App</title>
<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="loginModal" 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>
<h1 class="text-center">Login</h1>
</div>
<div class="modal-body">
<form class="form col-md-12 center-block">
<div class="form-group">
<input type="text" value="b" class="form-control input-lg" id="username" placeholder="Email">
</div>
<div class="form-group">
<input type="password" value="a" class="form-control input-lg" id="password"placeholder="Password">
</div>
<div class="form-group">
<button class="bn btn-primary btn-lg btn-block" id="test" value="Sign In">Sign In</button>
<span class="pull-right">Register</span><span>Need help?</span>
</div>
</form>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Panic</h3>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Stay Safe.</h1>
<p class="lead">Panic is a beautiful emergency notification system like no other. Using the power of cloud computing, Panic innovates in ways you've never seen.</p>
<p class="lead">
<button class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Sign Up.</button>
</p>
</div>
<div class="mastfoot">
<div class="inner">
</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.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
</body>
</html>
You try to call $ on line 11 of that source code (and maybe also in the script on line 9).
You don't include jQuery until the very end.
You have to include jQuery before you try to use it.
Move your code after the jQuery initialization:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/docs.min.js"></script>
<script>
$("#test").click(function() {
alert("Handler for .click() called.");
});
</script>
You need to include the jQuery library above your script. Also your script will work only if you keep it inside the $(document).ready() function.