I have simple html page to show bootstrap modal, however when I launch the model -
it gets covered by modal backdrop,
I checked the z- index of myModal - 1040 and that of modal backdrop is 1030
checked all posts in stackoverflow but none of them solve my issue
please help
<html>
<head>
<link href="" rel="stylesheet">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</head>
<body>
Launch demo modal
<div id="myModal" class="modal hide fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</body>
</html>
You forgot a few things, which are:
the <div class="modal-dialog">
the <div class="modal-content">
You also added some unecessary things which are:
the hide class on the <div id="myModal" class="modal fade in" aria-hidden="true">
the in class on the <div id="myModal" class="modal fade in" aria-hidden="true">
Your working code will look like this:
Launch demo modal
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
</div>
</div>
Here's a JsFiddle to show it in a working environment.
To read everything about the modal, please check this
Hope this helps!
Remove the hide class from your modal.
JSFdiddle
Launch demo modal
<div id="myModal" class="modal fade in" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h3 id="myModalLabel">Log in</h3>
</div>
<div class="modal-body">
<form class="modal-form" id="loginform">
<input type="text" name="username" placeholder="login" id="username">
<input type="text" name="password" placeholder="password" id="userpassword">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-success">Login</button>
</div>
</div>
Related
I am trying to get a modal pop-up window from another modal pop-up
window. when i click the link from the first pop-up window, the second
pop-up window is opening, but the first one not getting closed.
I tried but not working properly.
Data target is not work because List item theme JavaScript is conflict.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function showpopup(id)
{
$("#textid").val(id);
$("#myModal").modal('show');
//alert();
}
function forgotpopup()
{
$("#myModal").modal('hide');
$("#ForGot").modal('show');
}
</script>
<article>
<div id="main-wrapper" class="container">
<a class="btn btn-primary" value="" data-toggle="modal" class="btn btn-primary" onclick="showpopup(<?php echo $fetch_package['cID'];?>);" style=" background:#ee8f22 ;">CLICK HERE</a><br>
</div>
</article>
<div class="container">
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title">Login</h4></center>
</div>
<div class="modal-body" style="padding:30px 40px;">
<form role="form" method="post">
<div class="form-group">
<label for="usrname" style="font-weight: normal; font-size: 14px;">Username</label>
<input type="text" class="form-control" id="email_id" placeholder="Enter email" name="email_id" required>
</div>
<div class="form-group">
<label for="psw" style="font-weight: normal; font-size: 14px;"> Password </label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter password" required>
</div>
<div class="form-group pull-left" style="width:100%; border:0px solid ;">
<input type="checkbox" >
<label style="font-weight: normal; font-size: 14px; margin-top:-27px; margin-left:23px;"> Remember me</label>
</div>
<center>
<button type="submit" class="btn" style="margin-top:15px; background:#ee8f22 ;color:#fff; " name="submit">LOGIN</button>
<p> Forgot Password </p>
<p>Not a member? <a href="#" >Sign Up</a></p>
</center>
<input type="hidden" name="txtid" id="textid" value="">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ForGot" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:center;">Forgot Password</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<h6>Enter your email associated with your account to get link to reset the password.</h6>
<input type="text" required>
</form>
</div>
</div>
</div>
</div>
</div>
How can I use a dynamically generated Bootstrap-Modal multiple times with a default state?
My problem is: When I click on the button to open the modal, you can see the default values 1 und 2. Now I enter '3' in the upper input field, close the modal with "Save changes" or "Close" and press the button again. Now, there should be 1 and 2 in the input fields but it's still 3 and 2.
I tried to fix it in jquery (as you can see in the code), but it did not work:
$('#openModal1').on('click', function(){
let x = `
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-dialogLabel">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">
<!-- actual form markup -->
<div class="form-group">
<label for="field1">Example label</label>
<input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input">
</div>
<div class="form-group">
<label for="field2">Another label</label>
<input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input">
</div>
<!-- /actual form markup -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
`;
$("#modal-area").append(x);
$('#modal-form').modal({});
});
$('#modal-form').on('hidden.bs.modal', function (event) {
$("#modal-area").empty();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div id="modal-area"></div>
<button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form">
Open modal form
</button>
How can I solve this problem?
You need to use html() not append() see below
$('#openModal1').on('click', function(){
let x = `
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-dialogLabel">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">
<!-- actual form markup -->
<div class="form-group">
<label for="field1">Example label</label>
<input name="field1" type="text" value="1" class="form-control" id="field1" placeholder="Example input">
</div>
<div class="form-group">
<label for="field2">Another label</label>
<input name="field2" type="text" value="2" class="form-control" id="field2" placeholder="Another input">
</div>
<!-- /actual form markup -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</form>
`;
$("#modal-area").html(x);
$('#modal-form').modal({});
});
$('#modal-form').on('hidden.bs.modal', function (event) {
$("#modal-area").empty();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div id="modal-area"></div>
<button id="openModal1" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form">
Open modal form
</button>
I am new to modal pop-up from the bootstrap. I am currently using here a modal from the examples on w3schools. I want to insert my input form inside the modal. So when the user click the Upload File button, this modal will pop-up. Here is the photo: (Please take a look at this image)
As you can see, my problem here is the input fields are unorganized, I just want to resize the modal so the input fields would fit in. How can I achieve that? Your help will be highly appreciated. Here is my code:
<!-- ******** LOG IN MODAL START ******** -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color: #003399;">
<button type="button" class="close" data-dismiss="modal" style="color:
#fff;">×</button>
<h4 class="modal-title" style="color: #fff;">Upload New File</h4>
</div>
<div class="modal-body">
<div class="form-horizontal">
<form class="form-horizontal" action="uploadfile.php" method="post"
name="addservice" enctype="multipart/form-data" align="center"
onsubmit="return validateForm()">
<div class="form-group">
<div class="form-group">
<label for="filename" class="col-sm-2 control-label">File Name:
</label>
<div class="col-sm-4"><input type="text" class="form-control"
name="filename" id="filename" placeholder="Name of the file"
maxlength="55" tabindex="1" required></div>
<!-- </div>
<div class="form-group"> -->
<label for="file" class="col-sm-2">File:</label>
<div class="col-sm-4"><input type="file" maxlength="11"
name="file" id="file" class="form-control" tabindex="2"
required></div>
</div>
<div class="form-group">
<label for="filedesc" class="col-sm-2">File Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3"
name=" filedesc" id="filedesc" placeholder="(maximum of 75
characters)" style="resize: none;" maxlength="75" tabindex="3"
required></textarea></div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group"><input class="btn btn-success btn-lg col-
sm-4" name="submit" type="submit" value="Upload" tabindex="4">
<input type="reset" class="btn btn-default btn-lg col-sm-4"
name="clear" value="Clear" tabindex="5">
</div>
</div>
</form>
</div>
</div> <!-- modal body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div> <!-- modal content -->
</div> <!-- modal dialog -->
</div> <!-- modal fade -->
<!-- ******** LOG IN MODAL END ******** -->
please check that this might help you:
Small Modal
<div class="modal-dialog modal-sm">
Large Modal
<div class="modal-dialog modal-lg">
here is the example:
<div class="container">
<h2>Small Modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<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>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
following is the code for which modal-dialog is not popping up.I am using Bootstrap 3.2.0 and jquery is also above 1.9.0.Help me out if i am missing something.And please let me know for any further information and Thanks in advance.
<div class="modal fade" id = "login" 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">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal">Login or Registeration </h4>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">
Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="jumbotron" id="home">
<div class="container-fluid">
<h1>The Design Store</h1>
<p>fdgdhfjgkhloj;jlkhhjgfdshjkl
sgdhfjgkhkjlrtyguuhjkoxcvbn
dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..</p>
<p>wefrgdthyjgukiosdfghjkgh
ssdfghjklertyuwertyuicvbnm,
sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg</p>
<p>My Account</p>
</div>
</div>
Everything is correct as far as markup (link below to view). Make sure you are including the jquery.js script before the bootstrap.js script.
Working demo of your code
<div class="modal fade" id="login" 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">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModal">Login or Registeration </h4>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Login">
<input type="submit" class="btn btn-primary" value="Register">
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-dismiss="modal">
Forgot Password?</a>
</div>
</div>
</div>
</div>
<div class="jumbotron" id="home">
<div class="container-fluid">
<h1>The Design Store</h1>
<p>fdgdhfjgkhloj;jlkhhjgfdshjkl sgdhfjgkhkjlrtyguuhjkoxcvbn dgfhmb,nm,asdfghjkl;';lklkjhjhgfddfghjhg'..
</p>
<p>wefrgdthyjgukiosdfghjkgh ssdfghjklertyuwertyuicvbnm, sdfghjklsdfghjkljjhgfdsdfghjkjhgddsadfg
</p>
<p>My Account</p>
</div>
</div>
I have this link-button:
<button class="btn btn-primary pull-right" id="btn">Read More</button>
I want onclick hit, a modal popup appears with all the article details.I have tried a lot until now but nothing runs properly.Any ideas?
UPDATED
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false
})
$('#btn').click(function() {
$("#dialog").dialog({
modal: true,
height: 600,
width: 500,
buttons: {
Accept: function() {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
});
});
UPDATED (image)
If you are using Bootstrap , please see below example
<div class="modal fade" id="modelWindow" role="dialog">
<div class="modal-dialog modal-sm vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Heading</h4>
</div>
<div class="modal-body">
Body text here
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
$('#btn').click(function() {
$('#modelWindow').modal('show');
});
I think the main problem is with this code:
<a href="">
As there is no value in href, so whenever you'll click on the button actually it will click on that anchor tag and the page will refresh. You can use this:
<a href="javascript:void(0);">
Or on the click function you can get the event and use preventDefault.
Hope this will help you.
Thanks.
I get it without using some custom css or js. It works with bootstrap.js and bootsrap.css.
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<!--> Your Dialog Field -->
<div class="dialog">
Some Text Some Captions and/or images etc..
<button class="btn btn-warning" data-toggle="modal" data-target="#modal1">Show More</button>
</div>
<!--> Your Modal Field -->
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modallabel1" aria-hidden= "true">
<h1>Some Text for the Modals
Some Text for the Modals
Some Text for the Modals
Some Text for the Modals</h1>
</div>
</html>
There are better examples (Bootstrap Modals), but this works without own js.
You can follow instructions to use Booststrap Modal Popup
Step:-1
Add Bootstrap Modal Container
**Step:-2** Add Button to Show Modal Popup
Save
function getBuiltyUpdateForm(id, dcNo) {
$('#builtyUpdateModal').modal('show');
}
function saveRecord() {
alert{"It's Working"}
}
<a onclick="getBuiltyUpdateForm()" class="btn btn-sm btn-warning btn-lg m-t-n-xs"><i class="fa fa-plus" title="Update"></i></a>
<div class="container">
<div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Builty Number</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<label>DC Number</label>
<input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" disabled autocomplete="off" class="form-control" />
<p id="dcNumber"></p>
</div>
<div class="col-md-3">
<label>Builty Date</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="builtyDate" data-validation="required" data-validation-error-msg="Date is required" data-validation-error-msg-container="#builtyDate" class="form-control custom-date-picker" type="text" value="31-May-2022" disabled />
</div>
<p id="builtyDate"></p>
</div>
<div class="col-md-6">
<input type="hidden" id="hdndcId" />
<label>Builty Number</label>
<input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" />
<p id="builtyNumber"></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> </div>
**Step:-3**
Write HTMl Code For Modal
×
Add Builty Number
DC Number
Builty Date
Builty Number
Submit
Close
function saveRecord(){ alert("It's Working") }
<div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Builty Number</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<label>DC Number</label>
<input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" disabled autocomplete="off" class="form-control" />
<p id="dcNumber"></p>
</div>
<div class="col-md-3">
<label>Builty Date</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="builtyDate" data-validation="required" data-validation-error-msg="Date is required" data-validation-error-msg-container="#builtyDate" class="form-control custom-date-picker" type="text" value="31-May-2022" disabled />
</div>
<p id="builtyDate"></p>
</div>
<div class="col-md-6">
<input type="hidden" id="hdndcId" />
<label>Builty Number</label>
<input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" />
<p id="builtyNumber"></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="builtyNumberUpdatebtn" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
function saveRecord(){ alert("It's Working") }
<div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Builty Number</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<label>Field 1</label>
<input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" autocomplete="off" class="form-control" />
<p id="dcNumber"></p>
</div>
<div class="col-md-3">
<input type="hidden" id="hdndcId" />
<label>Field 2</label>
<input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" />
<p id="builtyNumber"></p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="builtyNumberUpdatebtn" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>