I am implementing one bootstrap pop-up. And I am putting some value with special characters in data-target. These value coming from DB, This pop-up implementing through loop.
I tried with w3school. How can I open pop-up with special characters.
<!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.3.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>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my(Modal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="my(Modal" 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>
</html>
If remove the ( then it will work. But these id is not my hand, these id coming from API.
You need to "escape" the special characters in the selector. This:
data-target="#my(Modal"
Should be:
data-target="#my\(Modal"
Or:
data-target="#my\000028Modal"
Your sample code with just one \ added:
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my\(Modal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="my(Modal" 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>
You have to escape the special characters in order to let jQuery know that you want to use the character the way it is and it should not consider as a syntax error.
function escapeString(str) {
return (str + '').replace(/[\\"')(]/g, '\\$&').replace(/\u0000/g, '\\0')
}
// Add special characters here ^ -- after \\
// This allows single, and double quotes,
// opening, and closing parentheses.
Wrap your target value with the above function:
data-target="+ escapeString(targetValue) +"
<div ng-repeat="rule in ruleDetails">
<div>{{rule.name}} <i data-toggle="modal" data-target="#{{ rule.name }}"></i>
</div>
<div class="modal fade" id="{{ rule.name }}" tabindex="-1" role="dialog"></div>
</div>
I have special characters in rule.name for example: 'as-copy(1) from test data'
which is bounded with id attribute of bootstrap modal. By this UI modal or popup
is not opening and displayed rule name. Please help how to trim or escape
special characters here?
Related
I have a modal and I want to ask the user to authenticate before showing the modal (that overrides server files with the modal content).
I want the user to click on my editmodal button, to show a connection form and if it's the same as my json base64 encoded data the modal get shown.
My problem: I can't get my modal to be shown with any of those
$('#Modal').modal();
$('#Modal').modal('toggle');
$('#Modal').modal('show');
my code is :
<button id="buttonmodal" type="button" class="btn btn-primary" data-target="#exampleModal">
(i removed the data-trigger for i want to do it in js)
<!-- 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" style=" width: 600px;
height: 600px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button id="closebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
and my js is pretty simple for now :
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val(text);
$('#exampleModal').modal('show');
});
If ever you have tips or other way to do it, it would help a lot.
You are looking for id "Modal", while your component is using a class "modal" with an id "exampleModal". <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
To fix this you might want to change your code to:
$('.modal').modal();
$('.modal').modal('toggle');
$('.modal').modal('show');
or
$('#exampleModal').modal();
$('#exampleModal').modal('toggle');
$('#exampleModal').modal('show');
It all depends on how you would like to be finding your component.
Note: # is used for ids, while . for classes
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 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/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button to Open the Modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> -->
<button type="button" class="btn btn-primary" id="buttonmodal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width: 600px; height: 600px;">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val("test 123");
$('#myModal').modal('show');
});
</script>
</body>
</html>
Ok i was dumb, the solution was : my css link where point on bootstrap 4.3 where my script was going on an older version so i had conflict version that wern't shown in the console.
Ty for those who helped
I know this is probably a really simple, dumb issue, but I've searched around and can't seem to figure out what my problem is. I copied and pasted the example straight from the bootstrap website, and I can't get a modal to pop up on the screen no matter what I do.
Codepen at https://codepen.io/anon/pen/Pdrvoa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Webpage</title>
<link href='bootstrap.min.css' rel='stylesheet' type='text/css' />
<script href='bootstrap.min.js' type='text/javascript'></script>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
</div>
<!-- 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>
</body>
</html>
Your problem is the references of bootstrap. Look at that example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Webpage</title>
<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.3.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'>
<div class='row'>
<div class='col-md-12'>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
</div>
</div>
<!-- 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>
</body>
</html>
I would check the location of your JS/CSS files. Looks like a funky path you have in there; make sure you're pointing to the right folder or using an up-to-date cdn (the examples on their website use cdns I believe).
Just for reference, you can use https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css for the stylesheet
and https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js for the javascript. Also make sure you have a jQuery reference in there (https://code.jquery.com/) as this is needed for much of bootstrap's javascript functionality.
Note: Be sure to add the reference to jQuery BEFORE the reference to boostrap.js!
EDIT
I see Leo Rossetti just beat me to it, use his example as it appears to work.
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
I am creating a pop up div (modal) which will appear on screen by default. However I succeed to open it on button click but I want it open by default whenever I run the HTML page.
Here is my code.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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>
</html>
Where I am showing the modal using a button.In that I am using data-target property to invoke the modal. So how to do it without any click event?
Add class in to html code , such that
<div class="modal fade show d-block" id="newModal" role="dialog">
or you can call the following function when the page loads
$('#newModal').modal('show');
Use .modal('show') to show the model manually
$(document).ready(function() {
$('#myModal').modal('show');
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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>
Sorry I've not enough reputation to add a comment.
according to bootstrap modal component documentation, there's no need to pass any parameter to .modal() method.
$(document).ready(function() {
$("#myModal").modal();
});
Add class in to <div class="modal fade" id="myModal" role="dialog">, such that
<div class="modal fade in" id="myModal" role="dialog">
or you can call the following function when the page loads
$('#myModal').modal('show');
open modal at document.ready()
for eg.
$(document).ready(function (){
//open modal here
$('#myModal').show();
});
I'm looking to use the twitter bootstrap modal functionality. As such I have copy pasted out of the docs and include all the files. But every time I click my button nothing appears and I'm not sure why:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery-1.10.2.js"></script>
<script type="js/bootstrap.js"></script>
</head>
<body style="background:#bf9d93;">
<!-- Button trigger modal -->
<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" aria-hidden="true">
<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" 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>
</body>
</html>
Now according to the docs, under the usage section I am allowed to simply use the code above and invoke the modal via the data attributes. As such this is my first time using the element so I'm sure its a silly thing I've over looked but I cant see what it is...
Check line 8 of your code. You have:
<script type="js/bootstrap.js"></script>
Instead of:
<script src="js/bootstrap.js"></script>
Without correctly loading the bootstrap.js file it won't work.
On click event call:
$('#myModal).modal({ show: true });