Develop Reference

How to update a class inside modal body?

I've got a class <div id="modal-data"></div> which is inside a modal
This is the code:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
<div id="modal-data"></div>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
With this piece of code:
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<option value='x'>Create</option>");
But its not working... Can any one help?

Try this
$(document).ready(function() {
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#timezone').html("<option>Hi there</option>");
});
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<select class="js-source-states" style="width: 100%" id="timezone">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

Your DOM structure is wrong you wrote block element div inside select element which is invalid. It should be like following:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
</select>
<div id="modal-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
Also you should write your code under a specific callback, in this case you should in show.bs.modal callback:
$('#mymdl').on('show.bs.modal', function (e) {
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<h1>HI</h1>");
})

$('.modal-content').find('.modal-body').append('<p>append some html here</p>');
$('.modal-content').find('.modal-body').append('<h1>Hi</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- 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 id="myModal" class="modal fade" 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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="mdlbtn">Close</button>
</div>
</div>
</div>
</div>
I think this is what you want. if it is i can explain you

Bootstrap modal does not open

I have a modal in my html file that I want to trigger with a button.
My button is inside a table. This is the code of my button:
<button type="button" class="btn btn-outline-primary"
data-toggle="modal" data-target="#squarespaceModal" >
<!-- [routerLink]="['/function', bfunc.AName]" -->
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
And this is my modal-code in the same html-file:
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
When I hit the button nothing happens.
I checked the console but there are no errors
Can anyone help me please?
EDIT:
I have imported these scripts in my index.html
<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>

You need to import the bootstrap css https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

As was mentioned you need to ensure that all resources (js, css, jquery) are imported in order to get the modal to work. Here's a simple html file with the modal code and all resources in the head.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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"> ... </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>

Push a Javascript ID into a bootstrap modal (when existing feature in place...)

How do I pass a value into a Bootstrap Modal? I have some basic HTML that looks like this:
<h2 class="name" itemprop="name">Name ABC</h2>
What I would like to see happen is for the 'NAME ABC' to be pushed or 'echoed' within a bootstrap modal..
I am assuming you use an 'id' but I' must not sure how to code that....
The HTML in the bootstrap would need
<input type="text" name=" ID " value=""/> * I think!! *
If anyone can jump in with the basic JavaScript to make this work I'd be very grateful! Thanks!

$("#submit").click(function(){
$("#modalInput").val($("#input").val());
$("#modal_id").modal('show');
});
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Type a message : <input type="text" id="input">
<button id="submit">Send</button>
<div class="modal fade" id="modal_id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Message!</h4>
</div>
<div class="modal-body">
Your Value : <input type="text" id="modalInput" readonly/>
</div>
</div>
</div>
</div>

To achieve this you can instantiate a Bootstrap modal as normal, then simply add a click handler to the h2 element which places its text() value within the target input in the modal. Try this:
$('.name').click(function() {
$('#foo').val($(this).text())
});
<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>
<h2 class="name" itemprop="name" data-toggle="modal" data-target="#exampleModal">Name ABC</h2>
<h2 class="name" itemprop="name" data-toggle="modal" data-target="#exampleModal">Name XYZ</h2>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
<input type="text" id="foo" name="ID" value="" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

you can try following
$('input[name="ID"]').val($('h2.name').text());
$('input[name="ID"]').val($('h2.name').text());
<!DOCTYPE html>
<html lang="en">
<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 class="name" itemprop="name">Name ABC</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">
<input type="text" name="ID" value="" /> * I think!! *
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I think what you are trying to achieve is getting value of text with class .name and setting it in as an id attribute, which is in modal box of bootstrap. If so following process will help.
html
<h2 class="name" itemprop="name">Name ABC</h2>
sdsdf
<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">
<p id="" class="myValue">One fine body…</p>
</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>
jquery
$(function() {
var myTxt = $('.name').text();
$('.myValue').attr('id', myTxt);
})
What I have done is taken text from div with class name "name" and but that in as a id attribute in modal div with class "myValue". Hope this helps

Background image in bootstrap modal

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>

Bootstrap Collapse Widget not working

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>