jQuery Cide:
function modal(this) {
alert($(this).data("id"));
}
HTML Code:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="<?php echo $state['ID']?>" onclick='modal(this)'>Open Modal</button>
Bootstrap Modal
<!-- 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">
<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>
Error:
Uncaught ReferenceError: modal is not defined at HTMLButtonElement.onclick
I already defined modal outside of document ready function but it displaying me modal is not defined error How to resolve this error?
Here is working snippet.
function modal(ref) {
alert($(ref).data("id"));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-id="1" onclick='modal(this)'>Open Modal</button>
Read this: Why can't I use onClick to execute a function inside a jQuery $(document).ready function?
Add an id to the button: id="btnModal"
Delete this: onclick='modal(this)'
Put this (outside your document.ready):
$('#btnModal' ).click(function()
{
$('#myModal').modal('show');
});
Related
// I found it in jquery but i want it in javascript is there any alternative code. Please help, thanks
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
I believe bootstrap toggles a class on the modal (haven't looked it up recently.
The plain JS equivalent would be
window.addEventListener('load', () => {
const modal = document.querySelector('#myModal');
if (modal) {
modal.classList.add('show');
modal.style.display = 'block';
}
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</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 may need to check the bootstrap docs to be sure what the class name it adds in.
How to use a button to show the modal in other components? For example, I have the following components:
info.vue
<template>
<div class="container">
<button class="btn btn-info" #click="showModal">show modal</button>
<example-modal></example-modal>
</div>
</template>
<script>
import exampleModal from './exampleModal.vue'
export default {
methods: {
showModal () {
// how to show the modal
}
},
components:{
"example-modal":exampleModal
}
}
</script>
exampleModal.vue
<template>
<!-- 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">
hihi
</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>
</template>
How to show the modal from exampleModal.vue? I know that I can
use data-toggle and data-target to show the modal, like this:
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
But is there any way to show the modal by using the method "showModal"?
According to your snippet, you're using a classic Bootstrap modal. You just need to use data-toggle and data-target attributes in that case:
<div id="app">
<div class="container">
<button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button>
<example-modal></example-modal>
</div>
</div>
Edit
I misread the question so i edit my answer.
It's possible to open the modal with a custom method. You just need to find the element "#exampleModal" by using refs and then open the modal with a bootstrap method (Bootstrap Programmatic API)
<div id="app">
<div class="container">
<button class="btn btn-info" #click="showModal">show modal</button>
<example-modal ref="modal"></example-modal>
</div>
</div>
methods: {
showModal() {
let element = this.$refs.modal.$el
$(element).modal('show')
}
}
Fiddle example
Without jQuery you could create a function on "method:" block like this:
openEditModal(data){
// <handle with your data>
this.$root.$emit("bv::show::modal", "your-modal-id");
}
I can not get my modal to open. I tried just the plain HTML found on the Bootstrap 4 site and then used some Javascript. I really can not figure out what I am doing wrong. Any help would be very much appreciated!
enter code here<
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</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>
</div>
`enter code here`<script type="text/javascript">
enter code here $("#box1modal").click(function(event){
enter code here$('#myModal').modal('show');
enter code here )};
If You are using bootstrap no need of extra scripting.bootstrap itself provides its scripts to run different animations and actions. I checked your code.
The error lies in line
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See you've set data target as #exampleModal while id of your modal is "myModal". Just change above code to
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#myModal">
And it will work fine without any other script.
Hope this Helps...
You have given the data target as examplemodal and the id of div as mymodal. Both should have been the same, thats the issue.
i test your code , every things fine just you have to make sure
1) add references
2) your code must be inside $(document).ready(function(){ ---- }
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-3 col-centered boxes" id="box1">
<button type="button" class="btn btn-primary" id="box1modal" data-toggle="modal" data-target="#exampleModal">
See More
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Wedding Invites</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="Wedding%20Invites.jpg">
</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>
</div>
</body>
</hmtl>
<script>
$(document).ready(function(){
$('#box1modal').click(function(){
alert("btn click")
$('#myModal').modal('show')
});
});
</script>
Below is the current HTML code --
<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="#myModal">Open Modal 1</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 2</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 3</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>Content of modal -- </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Here multiple buttons call the same modal. Now inside the modal there is no way to determine which button press has called this.
I want to modify the above code so that i can pass a parameter into the modal. For example, clicking on 1st button should pass "button 1" and that should be displayed in the modal body section.
I know I can add ng-click to the buttons and call a function. I can pass the string button 1/2/3 as its parameter. Inside the function I can set a particular global parameter value as the string passed. But how do I invoke the modal from inside this function? I am not sure whether this is even possible.
Please let me know how I can achieve the above using angular JS.
You can implement ng-clicks of each button and then can create a scope variable inside the function that gets triggered on click. And by using the same variable you can now update the modal body section.
HTML Would be like:
<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="#myModal" ng-click="data = 'content 1'">Open Modal 1</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" ng-click="data = 'content 2'">Open Modal 2</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" ng-click="data = 'content 3'">Open Modal 3</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>Content of modal -- {{data}} </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
You don't need to use global things.
You can do it using resolve property.
defined the function which will going to call your modal function which open the modal.
<button ng-click="callModalFun('Btn1')">Btn1</button>
<button ng-click="callModalFun('Btn2')">Btn2</button>
<button ng-click="callModalFun('Btn3')">Btn3</button>
JS :
function callModalFun(strBtnName){
var modalInstance = modal.open({
..,
resolve : {
data : {
strFromBtn : strBtnName;
}
},
controller : 'myCtrl'
});
}
and in the controller do like this one.
.controller('myCtrl',function($scope,resolveData){
$scope.strBtnName = resolveData.data.strFromBtn;
})
strBtnName is available inside of the template.
I have 5 modal forms in a page. And I want to get the Id of the currently opened one.
I know I can check with $('#myModal').hasClass('in');. If I have 5 modal forms I have to write this 5 times. Which I don't want to.
Is there some way I can determine which modal the user has open currently open and then I will get the id of that.
You can use the shown.bs.modal event to get the current open modal.
Modal Events
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
Here is an example
$('.modal').on('shown.bs.modal', function (e) {
var crntModalId = "current modal id is: " + $(this).attr('id');
$('.output').text('');
$('.output').text(crntModalId);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.6/js/bootstrap.min.js"></script>
<div class="output"></div>
<br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-One">
Launch modal one
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-One" 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>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-Two">
Launch modal two
</button>
<!-- Modal -->
<div class="modal fade" id="myModal-Two" 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>
It's very simple, with bootstrap modal event's
To get any attribute value from the modal trigger button you can use $(e.relatedTarget)
To get the modal attribute value you can use $(e.currentTarget)
In your case, you can get the Opened modal id with
$('.modal').on('shown.bs.modal', function(e) {
var modalid = $(e.currentTarget).attr('id');
});
Fiddle
A bootstrap modal gets automatically the class 'shown.bs.modal' when is open, so you can use this to track which one is open.