how to update event in fullcalendar 5 when click on button? - javascript

i create fullcalendar5, in fullcalendar5 update is done by dragging event and changing their place. but in my case update done when i click button update.
when i click on event it show form edit event, i want when i edit title value and click button edit title event change.
i try this code but not work ,I believe callendar 5 has a predefined function, in edit , i search but i can't find it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="container main">
<div class="modal fade mb-3" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-add" style="background-color: #e1b058 ; color: white !important;">
<h5 class="modal-title " id="exampleModalLabel">Nouvelle Notificaton </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Titre de la tâche</label>
<input type="text" class="form-control" id="titre" name="name" required >
<span id="titleError" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Date de la tâche</label>
<input type="datetime-local" class="form-control" name="datee" id="date" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="edit-event"><i class="fas fa-save"></i> edit </button>
</div>
</div>
</div>
</div>
<div class="card mb-4 mt-3 p-2">
<div id='calendar'></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
eventColor: 'orange',
editable: true,
events: [
{
id: '1',
title: 'All Day',
start: '2022-09-01'
}
],
eventClick: function(event){
$('#exampleModal').modal('toggle');
$('#titre').val(event.event.title);
$('#date').val(event.event.start);
$('#edit-event').on("click", function(){
event.event.title = $('#titre').val();
$('#exampleModal').modal('hide');
});
},
});
calendar.render();
});
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>


As per the documentation of the Event object :
All properties are read-only
Thus, you should use setProp() to update the title property.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="container main">
<div class="modal fade mb-3" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-add" style="background-color: #e1b058 ; color: white !important;">
<h5 class="modal-title " id="exampleModalLabel">Nouvelle Notificaton </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Titre de la tâche</label>
<input type="text" class="form-control" id="titre" name="name" required >
<span id="titleError" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Date de la tâche</label>
<input type="datetime-local" class="form-control" name="datee" id="date" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="edit-event"><i class="fas fa-save"></i> edit </button>
</div>
</div>
</div>
</div>
<div class="card mb-4 mt-3 p-2">
<div id='calendar'></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
eventColor: 'orange',
editable: true,
events: [
{
id: '1',
title: 'All Day',
start: '2022-09-01'
}
],
eventClick: function(event){
$('#exampleModal').modal('toggle');
$('#titre').val(event.event.title);
$('#date').val(event.event.start);
$('#edit-event').on("click", function(){
event.event.setProp("title", $('#titre').val());
$('#exampleModal').modal('hide');
});
},
});
calendar.render();
});
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>

Related

My datepicker doesn't display in bootstrap modal form

I am having form in Bootstrap. This form popups on button. In form I have input field in which I want to make jQuery datepicker. It never displays when clicking on input field
In my head I have included this files:
<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">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.3.0/dist/bootstrap-vue.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<script src="config.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
My modal code is this
<!-- Modal: modalAddContract -->
<!-- Datepicker - MS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function() {
$(document).on("click", ".modal-body", function () {
$("[data-toggle='datepicker']").datepicker({
dateFormat: 'yy-mm-dd',
parentEl: '#dispatch_modal'
});
});
});
</script>
<form id="addContractForm">
<div class="modal fade" id="modalAddContract" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div id="new-contract-app" class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center w-100 font-weight-bold lang" key="langAddContract"></h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="lang" key="langDevice" for="addContractFormDeviceID"></label>
<select class="form-control" id="addContractFormDeviceID">
<option v-for="device in vueDevices.items" :value="device.id">
{{ device.device_type }} - {{ device.device_description }} ({{ device.id }})
</option>
</select>
</div>
<div class="form-group">
<label class="lang" key="langContractDescription" for="addContractContractDescription"></label>
<input type="text" class="form-control" id="addContractContractDescription">
</div>
<b><div class="lang" key="langAddContractInstrTop"></div></b><br>
<div class="row align-items-end">
<div class="form-group col">
<label class="lang" key="langDateFrom" for="addContractFormDateFrom"></label>
<input data-toggle="datepicker" type="text" class="form-control" id="addContractFormDateFrom" placeholder="YYYY-MM-DD">
</div>
<div class="form-group col">
<label class="lang" key="langDateTo" for="addContractFormDateTo"></label>
<input data-toggle="datepicker" type="text" class="form-control" id="addContractFormDateTo" placeholder="YYYY-MM-DD">
</div>
</div>
<hr>
<b><div class="lang" key="langAddContractInstrMid"></div></b><br>
<div class="row align-items-end">
<div class="form-group col-6">
<label class="lang" key="langDeviceUser" for="addContractFormDeviceUser"></label>
<input type="text" class="form-control" id="addContractFormDeviceUser" v-model="inputUser">
</div>
<div class="form-group col-3" style="padding-right: 0px">
<label class="lang" key="langUserPart" for="addContractFormUserPart"></label>
<input type="text" class="form-control" id="addContractFormUserPart" v-model="inputPart" onkeyup="$('#addContractFormUserPart').val($('#addContractFormUserPart').val().replace(',','.'))">
</div>
<div class="form-group col-3">
<b-button block variant="outline-success" class="float-right lang" key="langAddUser" #click="addUser"></b-button>
</div>
</div>
<ul>
<li>{{ owner }}, delež: {{ computedPart }}</li>
<li v-for="user in users">{{ user.email }}, delež: {{ user.usage_part }} <span v-on:click="removeUser(user)" style="color:red"><span class="lang" key="langRemove"></span> <i class="fas fa-times"></i></span></i></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary lang" key="langCancel" data-dismiss="modal" #click="resetAddContractForm"></button>
<button id="addContractButton" type="button modal-dialog-centered" class="btn btn-primary lang" key="langAddContract" #click="addContract"></button>
</div>
</div>
</div>
</div>
And also in the end of my code I have those scripts
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script
<script src="lib/mobile-nav/mobile-nav.js"></script>
<script src="lib/p2r/jquery.p2r.min.js"></script>
Funny is that if I create new .html file and include just tags which are within the and only one input field my code works fine.. SO i guess there is a problem with the modal or popup.. I don't know how to fix it.. THank you

How to get value from input field modal bootstrap and show the value to another input field in the same modal with jquery?

I have code html this:
<div class="modal fade" id="modalTambahDataTransaksiZakat">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<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">TAMBAH DATA TRANSAKSI ZAKAT</h4>
</div>
<div class="modal-body">
<form role="form" action="" method="post">
<div class="box-body">
<div class="form-group">
<label>Gaji Muzakki</label>
<input type="number" class="form-control" id="gaji_muzakki "
name="gajiMuzakki">
</div>
<div class="form-group">
<label>Nominal Pembayaran</label>
<input type="number" class="form-control" id="nominal_pembayaran"
name="nominalPembayaran">
</div>
</div>
</div>
</form>
How to get value from input field "gaji muzakki" after i type the value in input field "gaji muzakki" and show the value to input field "nominal pembayaran" with jquery ?

this will do the trick
$('#gaji_muzakki').on('change', function(){
$('#nominal_pembayaran').val($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalTambahDataTransaksiZakat">
Launch modal
</button>
<div class="modal fade" id="modalTambahDataTransaksiZakat">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<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">TAMBAH DATA TRANSAKSI ZAKAT</h4>
</div>
<div class="modal-body">
<form role="form" action="" method="post">
<div class="box-body">
<div class="form-group">
<label>Gaji Muzakki</label>
<input type="number" class="form-control" id="gaji_muzakki"
name="gajiMuzakki">
</div>
<div class="form-group">
<label>Nominal Pembayaran</label>
<input type="number" class="form-control" id="nominal_pembayaran"
name="nominalPembayaran">
</div>
</div>
</div>
</form>
<input type="text" id="nominal_pembayaran">

If I've understood you correctly, it should be as simple as:
$(document).on('input', 'input[name="gajiMuzakki"]', function() {
// Set the value into $value.
let $value = $(this).val();
// Populate 'nominalPembayaran' with this value.
$(document).find('input[name="nominalPembayaran"]').val($value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="gajiMuzakki" placeholder="Gaji Muzakki">
<input type="text" name="nominalPembayaran" placeholder="Nominal Pembayaran">

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>

Bootstrap modal grid layout missing padding

I've got a modal with a grid layout because I put the labels above each field. That mostly works but they fill the entire Modal running right up to the left/right edges. I don't seem to have that trouble with the demo from the bootstrap site but those are text fields instead of and tags. I played around with the form-control class but that seemed to make matters worse. Is there a class I'm missing?
Here's a JSfiddle of my code: https://jsfiddle.net/jdnag6zx/
<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/jdnag6zx/-->
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="column-type" class="col-lg-4 control-label">Date</label>
<label for="column-type" class="col-lg-4 control-label">Separator</label>
<label for="column-type" class="col-lg-4 control-label">Example</label>
</div>
<div class="row">
<select class="col-lg-4" id="date-format" >
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
<select class="col-lg-4" id="date-separator">
<option>/</option>
<option>-</option>
</select>
<input class="col-lg-4" id="date-example" value="1-1-2017"></input>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

Remove the .row classes from .modal-body https://jsfiddle.net/jdnag6zx/1/

This is a better approach!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<label for="column-type" class="control-label">Date</label>
<select class="form-control" id="date-format">
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Separator</label>
<select class="form-control" id="date-separator">
<option>/</option>
<option>-</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Example</label>
<input class="form-control" id="date-example" value="1-1-2017" />
</div>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>

Use bootstrap table instead of cols check this fiddle

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

Categories