I have a button that when its clicked it shows a window with some information, as follows
$(function() {
$("#basicModal").collapse('toggle');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Click to open Modal
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-body">
<div class="row">
<img src="css/cabin.jpg" class="img-responsive col-md-6" alt="conductor">
<div class="row">
<label>Name: </label>
<label id="basicModal-placeName">placeName</label>
<br>
<label>Address: </label>
<label id="basicModal-placeAddress">#asf-2431</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
Now I want to do the same thing the first "a" tag does but programmatically and erase the that container, leaving just the code starting at the div with class modal. I have tried the following:
$("#basicModal").collapse('toggle');
But this just shows the windows and blocks the content that is inside it that is supposed to be interactive to the user. How can I achieve this?
I solve this by using $('#basicModal').modal('show');
Related
Hi im trying to disable outside click in my modal. I've tried using methods like backdrop: 'static', keyboard: false but i cant seem to make it work
html:
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
</button>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
javascript:
$(function() {
$('#basicExampleModal').modal('show');
});
You have couple syntax issues in the code you posted. Ex. extra </button> tag and data- keyboard="false"> has a space in it. Aside from the syntax issues, it should work as expected as you can see from below example. If it still doesn't work on your end, there is something else wrong elsewhere in your code.
$('#basicExampleModal').modal('show');
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center>
<h1 class="modal-title" id="exampleModalLabel">Want more?</h1>
</center>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Use this:
$(function() {
$('modal_id').modal('show');
$('modal_id').modal({
keyboard: false,
backdrop: 'static'
})
});
This script will now allow close the modal by clicking outside the modal or by pressing the esc key.
I have one button on my page called Add more fields. When the user clicks on the button then the bootstrap modal will open with the label name and file upload fields. The user can add the label name and file.
The user can add multiple times. Whatever the user adding in the label name and file upload that I am displaying on the page using jQuery append.
Now, my issue is, I am able to append the data correctly but I am not getting the file name that the user uploaded.
Once I get the label name and file then I have inserted the data into the database.
I know there is some issue with my script. What can I do to resolve it?
$(".clicktoaddfile").click(function() {
var labelname = $('#labelname').val();
var filename=$("#newfileuploaded")[0].files[0]['name'];
var html = '<div class="col-lg-3"><label>' + labelname + '<label><div class=""><input type="file" value=' + filename + '></div></div>';
$('#appendhere').append(html);
$('#labelname').val('');
$('#newfileuploaded').val('');
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form>
<div class="row" id="appendhere"></div>
<input type="submit" name="">
</form>
<div class="w-100 text-center pt-3 pb-4">
+ Add Custom Document
</div>
<div class="modal fade" id="modal-customDoc" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Document Upload</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-group mt-4">
<label for="labelname" class="form-label">Type of Document</label>
<input type="text" name="labelname" class="form-control" id="labelname" placeholder="name">
</div>
<div class="form-group mt-4">
<div class="documentUploadWrap">
<div class="upload_doc">
<div class="closefile"> <i class="fas fa-times"></i></div>
<input type="file" name="uploadfile[]" class="fileupload" id="newfileuploaded">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn themeBg clicktoaddfile">Add Document</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
The thing is that i need to display both, modal dialog when page load and also with a button toggle. Now the button toggle is working fine, I'm using bootstrap 3.3.7 in wordpress site built with my own template. But i can't reach display the modal dialog on page load. I have enqueue bootstrap.min.js with a jquery dependencies, for the rest functions os my site all working like expective. This is the code that I'm using for.
var jqmodalshow = jQuery.noConflict();
jqmodalshow(document).ready(function(){
jqmodalshow("#myModal").modal('show');
});
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">BUTTON</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe our Newsletter</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</body>
The issue is because the HTML you wrote to create the modal was malformed. You had repeated the same id in two locations which is invalid, and you'd nested copies of .modal and .modal-dialog. The JS is valid and working.
If you fix the HTML issues then the code works fine.
jQuery($ => {
$("#myModal").modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">BUTTON</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Subscribe our Newsletter</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-primary">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
You have two elements with the id myModal that probably gives you an error. You have to give them different ids:
<div id="myModalDialog" class="modal fade" role="dialog">
…
<div id="myModal" class="modal fade">
…
and then the JS:
var jqmodalshow = jQuery.noConflict();
jqmodalshow(document).ready(function(){
jqmodalshow("#myModalDialog").modal('show');
jqmodalshow("#myModal").modal('show');
});
In my JSP page, I have a modal that shows a page which has another modal (inner modal).
The first modal:
<div class="modal-dialog modal-lg" style="background: white; width: 90% !important">
<input type="hidden" id="report-request-data-id" value="${requestId}"/>
<div class="modal-body">
<div id="reportDataDetailsDiv"></div>
</div>
<div class="modal-footer">
<label class="btn-is float">
<spring:message code='close.label'/>
<input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
</label>
</div>
</div>
The inner modal (loaded in the div with id "reportDataDetailsDiv" above):
<div class="modal-dialog modal-lg" style="background: white;border-radius: 6px;">
<div class="modal-body">
<div class="modal-content">
<div class="col-centered col-lg-12 col-xs-12 ">
.....etc
<div class="modal-footer">
<label class="btn-is float">
<spring:message code='close.label'/>
<input type="button" class="cus-close-modal-btn col-xs-3 col-lg-1 col-md-1" style="display: none;"/>
</label>
</div>
</div>
</div>
</div>
The problem happens when I click the close button in the inner modal. When I do that, both modal gets closed, but I would like the close action to be independent for each modal. How should I correctly do that?
Thank you.
As you are loading other modal inside reportDataDetailsDiv which is inside main-modal you can use .show() show it and whenever close button is clicked you can remove whole div which is added inside reportDataDetailsDiv.
Demo Code :
//suppose other modal is added like below
$(".addmodal").click(function() {
//append modal undr div
$("#reportDataDetailsDiv").html('<div class="modal-dialog modal modal-child" style="background: white;border-radius: 6px;" ><div class="modal-body"><div class="modal-content">Some message to show ....<div class="col-centered col-lg-12 col-xs-12 "><div class="modal-footer"> <label class="btn-is float"><input type="button" class="cus-close-modal-btn " value ="Close" style=""/> </label> </div></div></div></div>')
$(".modal-child").show(); //show that modal
$(this).hide();
$("#close_report_request_view").prop('disabled', true);//disable main modal button
})
//onclick of close button for modal added
$(document).on('click', '.cus-close-modal-btn', function() {
$(this).closest(".modal-child").remove(); //remove whole div
$("#close_report_request_view").prop('disabled', false);//enable main modal buton
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Click to open modal
<div class="modal-dialog modal fade modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="background: white; width: 90% !important">
<input type="hidden" id="report-request-data-id" value="1" />
<div class="modal-body">
<div id="reportDataDetailsDiv"></div>
</div>
<button class="addmodal btn btn-primary">Click me to open other modal</button>
<div class="modal-footer">
<label class="btn-is float">
Close
<input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
</label>
</div>
</div>
I ma trying to display username in modal text box using onclick button
I have a button from there on onclick i am calling onclick="getUserName(this.id)"
this.id
gives me name which i want to set in
modal textbox userName
Here is my function
function getUserName(username) {
$('#editUserPopUp').bind('show',function(){
alert(username);
$("#userName").val(username);
});
}
I am getting username in alert(username)
but how do i set thsi value to my modal, username text field
Here is my Modal
<div class="modal fade" id=editUserPopUp tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Password</h4>
</div>
<div class="modal-body">
<form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
<div class="input-group col-md-8">
<span class="input-group-addon">User Name</span>
<input class="form-control" id="userName" type="text" class="input-medium" disabled />
</div>
</form>
</div>
</div>
</div>
</div>
This should work.
But you should also take a look at the Bootstrap documentation about modal windows. There is a section explaining how to vary modal content.
Varying modal content based on trigger button
Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
function getUserName(username) {
var $modal = $('#editUserPopUp'),
$userName = $modal.find('#userName');
$userName.val(username);
$modal.modal("show");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button onclick="getUserName(this.id)" id="Foo Bar">Open Modal</button>
<div class="modal fade" id=editUserPopUp tabindex="-1"
role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Update Password</h4>
</div>
<div class="modal-body">
<form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
<div class="input-group col-md-8">
<span class="input-group-addon">User Name</span>
<input class="form-control" id="userName" type="text" class="input-medium" disabled />
</div>
</form>
</div>
</div>
</div>
</div>
I think the problem is you are using show event,instead try call shown event after all, like so :
function getUserName(username) {
$('#editUserPopUp').modal('show');
$('#editUserPopUp').on('shown', function () {
alert(username);
$("#userName").val(username);
})
}
p/s : did't test it. Hope this help. Comment if did't work.