我无法在模式对话框的输入字段中输入值。我正在附加我的代码与这个问题。它没有显示任何错误,但输入字段不可编辑。我已经搜索了这个问题,并找到了增加z-Index值的解决方案。我做到了,但它不起作用。
<!DOCTYPE html>
<!-- saved from url=(0040)http://getbootstrap.com/examples/signin/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Signin Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="./Signin Template for Bootstrap_files/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="./Signin Template for Bootstrap_files/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./Signin Template for Bootstrap_files/signin.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="./Signin Template for Bootstrap_files/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" id="#sign-in">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="button" id="btn1">Sign in</button>
</form>
</div> <!-- /container -->
<div id="dialog" title="Dialog Form"></div>
<div id="dialog-form" title="Create new user">
<label for="name">Name</label>
<input type="text" name="name" id="name" required="true"/>
<br/>
<label for="email">Email</label>
<input type="text" name="email" id="email" required="true" email="true"/>
<br/>
<label for="password">Password</label>
<input type="password" name="password" id="password"/>
</div>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./Signin Template for Bootstrap_files/ie10-viewport-bug-workaround.js"></script>
<script>
$(document).ready(function()
{
$('#btn1').click(function() {
$( "#dialog-form" ).dialog( "open" );
if($("#name").val()!='Srivatsava')
{
alert('you fool');
}
});
//code for dialog
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
zIndex: 1,
buttons: {
"Save": function() { //on click of save button of dialog
if($('#sign-in').valid()){ //call valid for form2 and show the errors
alert('submit form'); //only if the form is valid submit the form
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</body></html>