$(window).load(function(){
$('.alertbox').click(function(){
alert('You Clicked on Click Here Button');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<div>
<a class="alertbox" href="#clicked"> Click Here</a>
</div>
I want the alert to be displayed in the bootstrap Modal.
Create the error div in modal body. and set error
$(document).ready(function(){
$('#alertbox').click(function(){
$("#error").html("You Clicked on Click here Button");
$('#myModal').modal("show");
});
});
<!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.2.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" id="alertbox">Click here</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 id="error"></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>
Probably I didn't understood your question correctly, but you can't use the alert function to display a message insidea a page element. Alert displays a system alert outside the page dom.
If you want to display a message inside a modal you have to include (or inject) the modal markup in your page html, then you simply show/hide the modal via bootstrap functions.
You have a very good example here
Related
I have the following code copy-pasted from w3schools Modal training page .
<!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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">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>
<script>
$(document).ready(function () { $("#myBtn").click(function () { $("#myModal").modal('show'); }); });
</script>
</body>
</html>
I am using MS Visual studio 2019, with Jquery nuget package installed in the project. I simply copy the code to test it in the razor blank page, execute , then I get nothing apart from the button, when it is clicked , no modal appears.
Nevertheless, that code works for the online html compilers.
Am I missing something here ?
try this
$(document).ready(function(){ $("#myBtn").click(function(){ $("#myModal").modal('show'); }); });
Try to use bootstrap custom attribute to trigger the modal like below:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="myBtn">Open Modal</button>
use data-toggle and data-target in button tag.
I have edited your code. use data-toggle="modal" and data-target="#YOUR_MODAL_ID" in the button to make it work.
Here YOUR_MODAL_ID=myModal
Example using from HTML tag
<!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.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
data-target="#myModal"
id="myBtn"
>
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>
Example using with Javascript (jQuery)
<!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.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button
type="button"
class="btn btn-info btn-lg"
id="myBtn"
>
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>
<script>
$(document).ready(function(){ $("#myBtn").click(function(){ $("#myModal").modal('show'); }); });
</script>
</body>
</html>
Problem solved :
Just added :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Now the modal is show upon clicking the button.
The code works on Visual studio and looks like this now :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn btn-info btn-lg"
id="myBtn">
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>
<script>
$(document).ready(function () { $("#myBtn").click(function () { $("#myModal").modal('show'); }); });
</script>
</body>
</html>
Goal:
Close the bootstrap 5 modal with javascript code after displaying the alert message.
Problem:
I cannot make the function myFunction to be working and also closing the modal after displaying alert message with javascript code.
Info:
*You should not use 'data-bs-dismiss="modal"'
JSBIN:
https://jsbin.com/sileqajiho/edit?html,js,output
Thank you!
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" onclick="myFunction()" >Start</button>
</div>
</div>
</div>
</div>
<script>
function myFunction() {
alert("test")
}
<script>
</body>
</html>
var myModal = document.getElementById('staticBackdrop');
var modal = bootstrap.Modal.getOrCreateInstance(myModal)
modal.show()
https://jsbin.com/ciqocavoge/edit?html,js,output
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3">
<h3>Modal Example</h3>
<p>Click on the button to open the modal.</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<button type="button" onclick="test1()">Close me via script</button>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" onclick="myFunction22()" >Start</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
function test1() {
alert("sdf");
modalInstance.hide()
}
</script>
</body>
</html>
-------------
var modalInstance = null;
var modelElem = document.querySelector('#myModal');
modelElem.addEventListener('shown.bs.modal', function (){
modalInstance = bootstrap.Modal.getInstance(modelElem);
});
well I far as I know you have to use new , this is an example of a toast
var myToast = new bootstrap.Toast(toastDiV, opts)
myToast.show()
because they are classes you have to reference a new instance
for bootstrap 5.0 use the following code
var genericModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(genericModalEl)
modal.hide()
I have scanned several other posts relating to this, but I cannot work out a working solution sadly.
Any help greatly appreciated.
I am trying to stop the modals flashing visibility briefly while the page is loading. I have a 3D model that loads using OpenwebGL, so need a few seconds to load. The modals flashing at the start looks untidy.
I'm not sure of the best approach to stop the modals from loading until the 3d model has finished loading.
This is the HTML code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
</head>
<body>
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<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="myModal01" role="dialog" >
<div class="modal-dialog" style="display:none">
<!-- 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>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</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="myModal02" 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>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Me again.
Ok appreciate a lot of questions on the forum regarding this topic, but didn't find an easy fit.
I eventually figured out a solution using the following from various ideas combined.
So for anyone else trying to fix this issue in the future try the following:
Put the modal div's in a new div. Make the parent div invisible using a style comment in the header. Add this to the opening body comment onload="showdiv();",
Then add a function showdiv script at the bottom of your body.
Here is the same HTML above with the new adjustments:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
<link rel="manifest" href="media/manifest.json">
<link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#modaloff {
visibility: hidden;
}
</style>
</head>
<body onload="showdiv();">
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<div id="modaloff">
<div class="container" id="modaloff01" >
<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="myModal01" 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>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</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="myModal02" 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 02</h4>
</div>
<div class="modal-body">
<p>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showdiv() {
setTimeout(function () {
document.getElementById("modaloff").style.visibility = "visible";
}, 5000);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(document).ready(function() {
$("#myBtn2").click(function() {
$("#myModal2").modal({
backdrop: false
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal</h2>
<button type="button" class="btn btn-info" id="myBtn2">Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I found that {backdrop: false} can make modal's overlay be transparent.
But It prevent closing modal from click outside of the modal.
Question:
How can I make it enabled to close modal through click outside of the modal , At the same time, The modal's overlay remained transparent?
Just add opacity:0 to the backdrop element, and remove backdrop:false
.modal-backdrop {
opacity:0!important;
}
<!DOCTYPE html>
<html>
<head>
<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>
<script>
$(document).ready(function() {
$("#myBtn2").click(function() {
$("#myModal2").modal();
});
});
</script>
</head>
<body>
<div class="container">
<h2>Modal</h2>
<button type="button" class="btn btn-info" id="myBtn2">Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add the following style
.modal-backdrop.in {
filter: alpha(opacity=0); // For IE
opacity: 0; // For all other browsers
}
Also there is no need of backdrop: false now.
But one thing that i want to mention is that although you will be able to see whats in the background, it wont be clickable or accessible until the modal closes.
I have a bootstrap modal button inside a div. I want it so that when I click on the button the modal opens but it ignores any programming for the outside div. I can get this to work using event.stopPropagation(); but the modal won't open. Can anybody see how to fix this?
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<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 id="testdiv" style="width:400px; height:400px; background-color:Beige;padding:40px;">
<button id="openmodal" 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-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>
<script>
$(document).ready(function(){
$("#testdiv").click(function(){
alert("Only show when the outside area is clicked")
});
});
$(document).ready(function(){
$("#openmodal").click(function(){
event.stopPropagation();
alert("Open the modal and only show this alert")
});
});
Open the modal on button click and remove the modal reference from the button that is remove data-toggle="modal" data-target="#myModal".Use .modal('show') to open the modal on button click
$(document).ready(function() {
$("#testdiv").click(function() {
alert("Only show when the outside area is clicked")
});
$("#openmodal").click(function() {
event.stopPropagation();
$('#myModal').modal('show');
alert("Open the modal and only show this alert")
});
});
<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>
<div id="testdiv" style="width:400px; height:400px; background-color:Beige;padding:40px;">
<button id="openmodal" type="button" class="btn btn-info btn-lg">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-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>