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.
Related
i want to show popup dialog box in asp net using js but it not working!
here is my code
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal" 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>
The behaviour: when i click the button, the popup dialog not shown and the page become disabled(gray shadow).
when i remove ( class= "modal"), it shown put also everything is disabled!!!
Did you add bootstrap.min.css, jquery.min.js, bootstrap.min.js in the view or the main layout?
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");
}
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');
});
I have a simple html design with an animated menu. I am trying to implement bootstrap on it and make modal window. But when someone clicks at contact, my animated menu stops working. Here you can check the problem.
My modal code here. I'm using #mymodal on menu link.
<!-- 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">
<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>
You can do this using Jquery
$(document).on("click",".menu",function(){
$("#myModal").modal("show")
})
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.