Madal Body content appear at modal footer
I have faced one problem in which the content of modal body appear at modal footer
whatever i write within modal body it will float to the modal footer
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="dist/css/bootstrap-select.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row" id="aap_modals">
<div class="col-md-12" >
<button class="btn btn-success" data-toggle="modal" data-target="#myModal" ><i class="fa fa-book" aria-hidden="true" > Select Question Heading</i></button>
</div>
<!-- Modal HTML -->
<div id="myModal" class="modal fade" data-keyboard="false" data-backdrop="static">
<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">Select Question</h4>
</div>
<div class="modal-body">
<div class="col-xs-2">
<label for="ex1">col-xs-2 and this is the problem </label>
<input class="form-control" id="ex1" type="text">
</div>
</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>
</div>
</body>
</html>
You missed a row inside modal body, Replace that modal body with this snip,
<div class="modal-body">
<div class="row">
<div class="col-xs-2">
<label for="ex1">col-xs-2 and this is the problem </label>
<input class="form-control" id="ex1" type="text">
</div>
</div>
</div>
Related
Is it possible to display Bootstrap Offcanvas inside a Modal?
Here is my code:
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a "Offcanvas right" by clicking the button below.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
Please try this
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title> Museum of Candy </title>
<style>
.modal-content {
overflow: hidden;
}
.modal-content .offcanvas {
position: absolute;
}
</style>
</head>
<body>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a "Offcanvas right" by clicking the button below.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
<!-- This is the JS section that's not working: -->
</body>
</html>
I am a beginner in programming i'm stuck with a problem..my modal is not working the modal is displaying in the page not in the popup..I desperately need the solution..it would be great if someone can help me get out of this problem.Here is my code snippet..
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>`enter code here`
<h4 class="modal-title">M Saifur Rahman,PMP</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And I am putting the links and scripts here..
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Change the position of the jquery importing in your html page,that is import jquery first then the bootstrap js because Bootstrapjs require jquery to run.
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">M Saifur Rahman,PMP</h4>
</div>
<div class="modal-body">
<p>Here goes the body content</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Just place the https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js before https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js. you You should load jquery first because bootstrap use jquery features.
Saif,
U have to define java script for opening the modal. For ex: if u want to open modal on button click then u will define commands to open on button
$('#online_exam').click(function(){
$("#myModal").modal('show');
})
Currently a button opens a modal that includes a text box. I need have that text box pre-populated, so I have attempted to mess around with the modal with no luck.
I have tried the following and nothing appears to happen.
function testFunc(){
$('#contactUsDlg').modal('show');
$('#contactUsDlg').on('shown.bs.modal', function {
$('#message-text').text("test");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" name="btn-ask" id="nonconform-btn" data-form-action-url="${newMessageUrl}"
data-pns="<%=OrderStatusPortletConstants.MESSAGE_CENTER_PORTLET_NAMESPACE %>"
data-use-ajax="true"
class="btn btn-submit btn-ask contact-us-dlg"
data-hidden-fields="message-order-id,message-source-url"
data-message-order-id="${selectedOrder.id}" data-message-source-url="${sourceUrl}" >
Contact Us
</button>
This is a possible solution basen on your snippets (not complete, IMHO)
$(document).ready(function() {
$('#contactUsModal').on('show.bs.modal', function(e) {
var text = $(e.relatedTarget).data('default-text');
$(this).find('#message-text').text(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<button type="button" name="btn-ask" class="btn btn-submit btn-ask contact-us-dlg" data-form-action-url="${newMessageUrl}" data-pns="<%=OrderStatusPortletConstants.MESSAGE_CENTER_PORTLET_NAMESPACE %>" data-use-ajax="true" data-hidden-fields="message-order-id,message-source-url"
data-message-order-id="${selectedOrder.id}" data-message-source-url="${sourceUrl}" data-toggle="modal" data-target="#contactUsModal" data-default-text="Initial contact us textarea modal content">
Contact Us
</button>
<div class="modal fade" id="contactUsModal" tabindex="-1" role="dialog" aria-labelledby="contactUsModalLabel">
<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="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
If you haven't already, you should look into using jQuery UI. Here you can use something like the following:
<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-ui-1.12.1.custom/jquery-ui.js'></script>
<link href='jquery-ui-1.12.1.custom/jquery-ui.css' rel='stylesheet' type='text/css'></link>
<link href='jquery-ui-1.12.1.custom/jquery-ui.theme.css' rel='stylesheet' type='text/css'></link>
<input id='mybutton' type='button' value='click me' />
<div id='result'>
<p id='firstp'></p>
<p id='secondp'></p>
</div>
<script>
$(function() {
$('#result').dialog({
open: function(event, ui) {
$('#resultp').html('[this is my text]');
}
});
});
$('#mybutton').on('click', function(evt) {
$('#secondp').html('[this is my second text]');
});
</script>
I am using a bootstrap modal when user comes to my website.
I want to use a Background image in modal so that it will look good.
I tried a lot but i am not able to set a background image in my bootstrap modal.
So can any one help me.
my css-
.modal-dialog{
background-image: url("static/markatix/imgs/modal/bg.png");
}
my modal code is-
<div class="modal-content" >
<div style="padding:5px 5px;">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="padding:4px 50px;">
<p id="new_notification1" >Hello User</p>
<p id="new_notification2">How are you?</p>
<form name="form" method="post" action="{% url "visitors" %}">
{% csrf_token %}
<p align='left'><label for="id_phone_number">Phone number:</label><br> <input id="id_phone_number" name="phone_number" type="text" pattern="[0-9]{10}" required/></p>
<input type="hidden" name="shop_id" value={{shop.id}}/>
<button class="btn2modal" type="submit">Login with Facebook</button>
</form>
</div>
<div >
<div class="modal-body" style="padding:4px 50px;">
</div>
</div>
</div>
Try with this , use background image to .modal-content class
.modal-content {
background:url('https://cdn.techinasia.com/wp-content/uploads/2011/09/Doodle4Google-2010-Group-1-Winner.jpg');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 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>
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
In your code modal-dialog class is nowhere present.
Try applying image to modal-boy
.modal-dialog{
background-image: url("http://imgh.us/boardroom_1.jpg");
}
Demo
Use this
.modal-body{
background-image: url("http://www.w3schools.com/css/trolltunga.jpg");
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
I need to have used Collapse in bootstrap to hide some information and display once button is click but I don't know that wrong on this one why it is not working.
<div id="myModal6" class="modal fade mdl" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title title_modal">Sample Data
<span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle pull-right btn_details" role="button" aria-controls="toggle-pane-88" id="toggle-89" aria-expanded="false">Toggle</span>
</h2>
</div>
<div class="modal-body">
<p class="toggle-collapsed" aria-hidden="true" id="toggle-pane-88" aria-expanded="false" aria-labelledby="toggle-89">This is my content!
</p>
<div class="row">
<div class="col-md-6">
<p class="headline_text">Sample again</p>
<p style="text-align:center"><img src="img/samp.jpg"
</div>
<div class="col-md-6">
<p class="headline_text"> </p>
<p style="text-align:center"><img src="img/samp21.jpg"/> </p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I also include here files needed in bootstrap:
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script src="dist/js/app.min.js" type="text/javascript"></script>
If you are just trying to put a collapse panel inside your modal you need to add a target div for #toggle-pane-88. See example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade mdl" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title title_modal">Sample Data
<span data-widget="collapse" tabindex="0" class="toggle-collapsed ui-collapse ui-toggle pull-right btn_details" role="button" aria-controls="toggle-pane-88" id="toggle-89" aria-expanded="false">Toggle</span>
</h2>
</div>
<div class="modal-body">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#toggle-pane-88">Simple collapsible</button>
<div id="toggle-pane-88" class="collapse">
<p class="headline_text">Sample again</p>
<p style="text-align:center">
<img src="img/samp.jpg" </div>
<p class="headline_text"> </p>
<p style="text-align:center">
<img src="img/samp21.jpg" />
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>