I am using bootstrap 3 for modal box.I am using i frame to load external content using data-src attribute.
<div class="container">
<a class="modalButton" data-toggle="modal" data-src="http://www.sitepoint.com/" data-height=320 data-width=450 data-target="#myModal">Click me</a>
<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">
<iframe frameborder="0"></iframe>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
It works perfectly,But the
external site is not responsive inside the modal.
If i open the site in the browser its responsive, and working good.
Already there is a demo for this data-scr, please check it
Thank you
http://jsfiddle.net/2AU6q/3/
Try giving the size of modal as the entire page by settingheight and width of the modal and the iframe as 100%. This might work. If you give height and width in pixel it will never be responsive
Related
I have to remove the image from the list in the conformation model click on the YES button but after 2nd time model is not open.In the element section after 2nd time click "
<span class="glyphicon glyphicon-remove-sign" data-toggle="modal" data-target="#openImage"></span>
<div id="openImage" class="modal in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure???</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this product?</p>
<div class="row">
<div class="col-12-xs text-center">
<button class="btn btn-primary btn-md" ng-click="removeSelectedProductKey($event, productObject.keyId)"> Yes</button>
<button class="btn btn-default btn-md" data-dismiss="close">No</button>
</div>
</div>
</div>
</div>
</div>
</div>
display :none" is apply tell me sir how to resolve this problem?
Try to open your modal by function using:
<span class="glyphicon glyphicon-remove-sign" ng-click="openImg()"></span>
And inside your controller write below function:
function openImg(){
angular.element('#openImage').modal();
}
I'm trying to append HTML content from the controller to the view. For this I know that we have to use ngSanitize. Everything is working fine, but it is stripping out the attributes of the HTML elements.
Here is my controller:
var modalVar = '<div class="modal fade" id="deleteModal'+ data.data.id +'" 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">Alert</h4></div><div class="modal-body"><p>Are you sure to delete?</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-danger" ng-click="deleteFunc('+ data.data.id +')" data-dismiss="modal">Yes</button></div></div></div></div>';
$scope.modalsDiv = $scope.modalsDiv + modalVar;
The view:
<div ng-bind-html="modalsDiv"></div>
If I inspect and see the rendered elements, every div element is rendered but their attributes are stripped out.
Controllers should not be adding HTML to the view.
<!--REPLACE ng-html-bind
<div ng-bind-html="modalsDiv"></div>
-->
<!--WITH ng-if -->
<div ng-if="showModal">
<div class="modal fade" id="deleteModal{{data.data.id}} +'" 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">
Alert
</h4>
</div>
<div class="modal-body">
<p>Are you sure to delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button"
class="btn btn-danger"
ng-click="deleteFunc(data.data.id)"
data-dismiss="modal">
Yes
</button>
</div>
</div>
</div>
</div>
</div>
JS
//$scope.modalsDiv = modalVar;
$scope.showModal = true;
Instead of composing HTML in the controller, use the ng-if directive. The code will be much more readable.
try this in your controller:
someVar = $sce.trustAsHtml('someVar');
do not forget to inject $sce into ctrl
Reset the values on Modal box on reload
<div class="modal fade" id="detailsModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header custom-modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Create Job Vaccination
</h4>
</div>
<!-- Modal Body -->
<form name="vaccjobctrl.vaccineForm" class="form-inline" >
<div class="modal-body" style="height: 150px">
<div class="row ">
<div class="form-group col-md-12" ng-class="{ 'has-error' : vaccjobctrl.vaccineForm.screeningType.$invalid && (vaccjobctrl.vaccineForm.screeningType.$dirty || vaccjobctrl.vaccineForm.screeningType.$touched) }">
<label for="regId" class="col-md-6">Screening Type:</label>
<span class="col-md-6">
<select style="width: 100%;"
ng-model="vaccjobctrl.vaccineForm.screeningTypeMast.screeningTypeId"
ng-options="sctype.screeningTypeId as sctype.screeningType for sctype in vaccjobctrl.screeningTypeList"
class="form-control field-size ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" name="screeningType"
id="screeningType" required>
<option value="">--SELECT--</option>
<option value="{{sctype.screeningTypeId}}">{{sctype.screeningType}}</option>
</select>
</span>
<div class="col-sm-6 error-color"
ng-if="vaccjobctrl.interacted(vaccjobctrl.vaccineForm.screeningType)"
ng-messages="vaccjobctrl.vaccineForm.screeningType.$error">
<div ng-messages-include="src/common/validation-messages.html"></div>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary-joli" ng-click="vaccjobctrl.saveJobVaccination(vaccjobctrl.vacc);" ng-disabled="vaccjobctrl.vaccineForm.$invalid" data-dismiss="modal">
Create Vaccination
</button>
</div>
</form>
</div>
</div>
</div>
this is the modal box.
On click on open Modal this function will be called
vm.showModal = function() {
$('#detailsModal').modal('show');
};
values in the select box are pre-populated, on reopening the modal box it show the previously selected values. If trying to clear that the the select box border color changed to red on reopen.
In Bootstrap 3 you can reset your form after your modal window has been closed as follows:
$('.modal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});
You can just reset any content manually when modal is hidden.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class='modal-body1'>
<h3>Close and open, I will be gone!</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can use:
$(".modal").on("hidden.bs.modal", function(){
$(".modal-body1").html("");
});
You can do more like:
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("Where did he go?!?!?!");
});
});
There are more about them in http://getbootstrap.com/javascript/#modals-usage.
UPDATE AS PER YOUR NEED:
If you want to do it angular way, use the jquery src above angularjs source in index.html. You can simply use the jquery functions inside the angularjs controller.
Working JsFiddle: http://jsfiddle.net/tnq86/15/
For using document.ready function in angular.
angular.module('MyApp', [])
.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
document.getElementById('msg').innerHTML = 'Hello';
});
}]);
However Creating directive is the right way to do it. Follow the link to get some help with creating directive to execute jquery functions in angularjs.
jquery in angularjs using directive
I cannot get tabs to work on the inside of my modal no matter what I do. If it matters the modal is within a ng-repeat with angularJS and the modal id is being called dynamically
<!--======== Trigger ========-->
<a data-toggle="modal" href='#{{faIcon.iconSelect}}'>Trigger Modal</a>
<!--======== modal ========-->
<div class="modal fade" id="{{faIcon.iconSelect}}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="fa fa-fw">{{faIcon.theIcon}}</i>{{faIcon.name}}</h4>
</div>
<div class="modal-body">
<h1><i class="fa fa-fw">{{faIcon.theIcon}}</i></h1>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="1">1</div>
<div class="tab-pane" id="2">2</div>
<div class="tab-pane" id="3">3</div>
</div>
</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>
<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">opied: {{copied}}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--======== modal ========-->
Am i missing an init code or something
according to my tests it seems that you don't have any problems with the code so the problem is probably on another line of your code.
The easiest but most common things that make this kind of thing happen is that you probably forgat to close some tag..
I am using rails to build my app. Tried to popup a modal box with angularstrap http://mgcrea.github.io/angular-strap/#/modal they are giving example of using modal box with partials.But I want to call a div from same page.they mention something with ng-template.But I didn't get any documentation for that. Anybody know about this??
You can read about ng-template here in the AngularJS docs. Implement it as follows:
<script type="text/ng-template" id="modal-template.html">
<div>Content of Modal</div>
</script>
Then where you're calling the modal, replace the reference to the partial with modal-template.html:
<button data-toggle="modal" bs-modal="'modal-template.html'">Call to Action</button>
In the main html page define your TemplageCache as follows:
<script type="text/ng-template" class="modal" id="/myTmpl.html">
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" ng-click="$hide()">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">This title</h4>
</div>
<div class="modal-body">
This is content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
</script>
Then in javascript
$scope.showMyModal=function(){
var myModal = $modal({placement:'center', animation:"am-fade-and-scale", templateUrl:'/myTmpl.html', show: true});
}
An ng-template would be if you had a inline (html string in javascript) variable. For example:
var t = "<div></div>";
t could be your ng-template.
Unforunately I don't know how to do what you are looking for.