We Keep Coding

Append a radio button with JQuery with label and have it work?

I have appended a radio button with JQuery, but for some reason it won't let me select the button when clicking the label. It works in HTML if you don't use jquery, so what am I missing:
$(document).on("shown.bs.modal", "#signmein", function(e) {
var html = '<input type="radio" name="colour" value="red" id="colour_red"><label for="colour_red">Red</label><br>';
$('#modalload').append(html);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>
<div class="modal" id="signmein">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div>
<label>The Field Label</label>
<div class="input-append">
<div class="btn-group pull-left" data-toggle="buttons">
<div id="modalload"></div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
https://www.bootply.com/yy3eAGjgGG

There is an event handler somewhere that is preventing the default behavior of your label, I couldn't actually find it but stopping the propagation of the event fised it.
$(document).on("click","#modalload label", function (e) {
e.stopPropagation();
});
$(document).on("shown.bs.modal","#signmein", function (e) {
var html = '<input type="radio" name="colour" value="red" id="colour_red"><label onclick="/*event.stopPropagation();*/" for="colour_red">Red</label><br>';
$('#modalload').html(html);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#signmein">Open Modal</button>
<div class="modal" id="signmein">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div>
<label>The Field Label</label>
<div class="input-append">
<div class="btn-group pull-left" data-toggle="buttons">
<div id="modalload"></div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>

How can I use a bootstrap-modal multiple times?

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>

How to resize modal from bootstrap

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>

How to open Modal popup on button click

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>

Modal does opens but does not close?

I am having Issues with the modal, it opens on loading and does not respond to clicks to close it. Not sure what the Issue is. Attached is the code I have. How do I make the modal open as I click the button and close when I click the x
<html lang="en">
<head>
<meta chart="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewort" content="width=device-width, intial-scal=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.min.js"></script>
<title>Bootstrap</title>
</head>
<body>
<!-- signup button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupform">
Signup
</button>
<!-- log in button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginform">Login</button> -->
<!-- popup signup form-->
<div class="modal-fade" id="signupform">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>
×
</span>
</button>
<h4 class="modal-title"> Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
First Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Last Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Email:
</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Confirm Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 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>
ref: getbootstrap.com/javascript/#modals