I have the following popup modal:
<div class="modal-wrapper" style="display: block;">
<div class="modal-popup-margin">
<div class="modal-popup">
<div class="modal-header">
<button type="button" class="close close-modal">×</button>
<span class="modal-title">Change Password</span>
</div>
<div class="modal-body">
<div class="row">
<span class="label">Old Password</span>
<input class="Textinput form-control ng-pristine ng-untouched ng-invalid old-password ng-invalid-required" value="" type="password" name="oldPassword" />
</div>
<div class="row">
<span class="label">New Password</span>
<input class="Textinput form-control ng-pristine ng-untouched ng-invalid new-password ng-invalid-required" value="" type="password" name="newPassword" />
</div>
<div class="row error-row">
<span class="label"> </span>
<span class="error-message"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary submit">SAVE</button>
<button type="button" class="btn btn-default-flat-goog pull-right close-modal">CANCEL</button>
</div>
</div>
</div>
<div class="modal-backdrop close-modal"></div>
</div>
It is meant to be re-usable, in that I would define the following for each item that calls it:
The name or the button(s) that are included in the modal-footer.
The various fields in the modal body, everything that is now a row.
The name of the modal, in modal-title.
The url the form submits to on clicking the SAVE button.
How would I create a "re-usable" form here without copy-pasting this same modal into each template and re-writing the changeable parts of it?
For this purpose, I would suggest injecting HTML with javascript, if you don't want to use frameworks. Your html inside a very basic builder function:
function makeModal(buttonshtml, bodyhtml, title, saveurl){
return `<div class="modal-wrapper" style="display: block;">
<div class="modal-popup-margin">
<div class="modal-popup">
<div class="modal-header">
<button type="button" class="close close-modal">×</button>
<span class="modal-title">${title}</span>
</div>
<div class="modal-body">
${bodyhtml}
</div>
<div class="modal-footer">
${buttonshtml}
</div>
</div>
</div>
<div class="modal-backdrop close-modal"></div>
</div>`
}
However, I don't see any save button or form.
Related
I am new to webDevelopment. Now, Here I have a list of buttons , but the data-target is a same model for every button click. So, My model is like -
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Missing {{suggestivalue}}
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputPassword3">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<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>
In this buttons are like -
<ul class="col-md-12 list-group suggestion">
<li class="list-group-item suggestion-list-group-item nopadding" ng-repeat="suggestion in suggestions | orderBy:'name'" tooltip-trigger
tooltip-placement="bottom" tooltip={{suggestion.name}} tooltip-popup-delay=200 tooltip-append-to-body="true">
<button ng-click="grabIndex(suggestion)" class="btn btn-default btn-block suggestion-button" role="button" data-toggle="modal"
data-target="#myModalHorizontal"><span class="suggestion-text">{{suggestion.name}}</span>
</button>
</li>
</ul>
Every Button is going to open a same model,But It should be respective to that of click value. E.g. If the button is like FullName , I should be able to add the two Input box fistName and lastName . Its like on click of the Button, How can I add the fields respective of that button.? Can any one help me with this ?
I think you can use ng-if
Just create all fields in modal
Like
firstname
lastname
email
password
remember me
When you click on btn , set a variable like showFields
Eg:
showFields== "login" or ""
showFields== "register"
use ng-if ='showFields== "register"' for fields that need to show only on register page
Hope it will help
I would like to know how to use Bootstrap responsive columns when resizing a containing div, and not just the viewport size.
I would like the inputs inside the form to stack side by side as I make the modal wider.
Html :
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
<div class="form-group col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
<div class="form-group col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
<div class="form-group col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Fiddle : https://jsfiddle.net/p204kwjz/6/
Can I make the inputs continue to stack horizontally as I enlarge the containing div?
The problem is that that the inputs are not "fluid" when I enlarge the div wide enough to fit them all in a row. Also, when the containing div is too small they overflow the div horizontally.
The context here is that the forms will be created dynamically, so I need some kind of smart layouting.
If you want your columns to take up the full width (stack horizontally) in bootstrap use col-md-12 on your form and wrap it in a div with class form-row. Basically bootstrap assumes each row is composed of 12 columns.
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2" >
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</form>
</div>
</div>
</div>
Here is a fiddle.
The form-group and the col-auto classes aren't playing nicely. You can achieve fluid inputs by nesting col-auto inside form-group
fiddle
<button>open
</button>
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog" id="pesquisa_modal" style="pointer-events: none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Modal
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group">
<div class="col-auto">
<label for="Form1">Form1</label>
<input type="text" class="form-control" id="Form1">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form2">Form2</label>
<input type="text" class="form-control" id="Form2">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form3">Form3</label>
<input type="text" class="form-control" id="Form3">
</div>
</div>
<div class="form-group">
<div class="col-auto">
<label for="Form4">Form4</label>
<input type="text" class="form-control" id="Form4">
</div>
</div>
</div>
</form>
</div>
</div>
You are using bootstrap 4.
In bootstrap 4, if you code for medium, say 2 divs of col-md-6 and use in smaller screen, div takes the full width and stacking happens, ie: both the divs are one above the other.
div {
display: flex;
margin: 0px;
padding 0px;
}
.col-md-6 {
/* Assuming that col-md-6 width is 1000px */
width: 1000px;
}
<div>
<div class="col-md-6" style="background-color:red;">
Sri harsha
</div>
<div class="col-md-6" style="background-color:blue;">
Achyuthuni
</div>
</div>
That is because, unlike Bootstrap 3, Bootstrap 4 is made using flex boxes.
To see how flex works, look into this link
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
On button click open Model like this
<i class="icon-note"></i>
Modal
<div id="edit-venue" class="modal fade portlet" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<form class="form-horizontal" id="editVenue" method="post">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Edit Venue Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-sm-3"><b>Venue12</b></label>
<div class="control-label col-sm-9 text-left">
<input id="venue" name="venue" class="form-control venue_name" placeholder="Enter venue" type="text">
<span class="error"></span>
<span class="error"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3"><b>Room/Stage</b></label>
<div class="control-label col-sm-9 text-left">
<input id="roomStage" name="roomStage" class="form-control" placeholder="Enter room/stage" type="text">
<span class="error"></span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn red">Cancel</button>
<button type="button" data-dismiss="modal" class="btn green btn_save">Save</button>
</div>
</div>
</form>
</div>
</div>
When I click on button open modal, I'd like to on click button fill up the data in perticular textbox using javascript dynamically.
on button click i got response like this {"id":67,"value":"venue 1","Xvalue":"venue 1"}
i tried to : $('#venue_name').val(msg.value);
but instead of #venue_name I want to use the closest().
How can I do this?
If I understand your question right, you want to set the value in the input box of model from the message.
You need to use the shown.bs.modal event of the modal.
var msg = {"id":67,"value":"venue 1","Xvalue":"venue 1"};
$('#edit-venue').on('show.bs.modal', function (e) {
$("#venue").val(msg.value);
})
JSFIDDLE : https://jsfiddle.net/01zrxq7y/1/
Boostrap Doc : http://getbootstrap.com/javascript/#modals-events
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>
I want to open a particular record in modal pop up for that i want to use query string to pass id to that modal popup which is on the same page after opening and displaying the data user can edit it and save it.
My code is as follows :
<a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
<div class="modal fade" id="myModalDetail">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodPrice ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
As far i can understand your question, you are having problem in passing the id to Modal, if yes, then you can do the following:
In your a-href code use data-id:
<a class="btn btn-info open_modal" data-toggle="modal" data-id="<?php echo productid;?>" data-target="#myModalDetail" href="#myModalDetail"> <i class="fa fa-edit"></i> </a>
Javascript:
$(document).on("click", ".open_modal", function () {
var product_id = $(this).data('id');
});