In my Laravel project , I use AdminLTE and I want to use modals in it.
all part of AdminLTE works great. but, I can't use modals. I don't know how to use it. should I add any js code for it?
scripts:
<script src="{{asset('bower_components/jquery/jquery.js')}}"></script>
<script src="{{asset('bower_components/bootstrap/dist/js/bootstrap.js')}}"></script>
<script src="{{asset('bower_components/admin-lte/dist/js/adminlte.js')}}"></script>
<script src="{{asset('bower_components/datatables.net/js/jquery.dataTables.js')}}"></script>
<script src="{{asset('bower_components/datatables.net-bs/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.full.js')}}"></script>
I want to have some thing like this : https://adminlte.io/themes/AdminLTE/pages/UI/modals.html
Its not Related to Laravel As long as it concerns The modals and Design
so now you have To Check your console For any Error And see If there is any error on console for that modal and if not you have to check any kind of js for modal or bootstrap for modal and in the end you can check from this link for cdn usage of modal plugin for bootstrap :
https://cdnjs.com/libraries/bootstrap-modal
and if not finally check the atrribute of modal and bottuns :
<!-- 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>
this is an example paste this code and check if its working on your project .
I had mistake in css loading and also I didn't add modal's js file :
<script src="{{asset('bower_components/bootstrap/js/modal.js')}}"></script>
Related
I am working on Angular project, launching popup model when my function getting called. I found example on w3schools but this is has all html logic to open it.
I want to open it from ts file when openPopup() function getting called.
popup model html code from given link.
<body>
<div class="container">
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
</div>
</div>
</div>
</div>
</body>
This is button to open popup
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
How can I replace this code to ts file events ?
create a variable like this. and remove toggle elements from modal.
// in ts
openModal: false;
//then in button click event:
<button (click)="openModalClick()"></button>
//in ts:
openModalClick(){
openModal=!openModal;
}
//in html
<div class="modal fade" id="myModal" *ngIf="openModal">
</div>
this will work in ts way, if you want to toggle with bootstrap,
then select button with id and use java script .click().
I am trying to open a Bootstrap Modal using the anchor tag. This is my HTML:
<ul class="dropdown-menu">
<li><a data-toggle="modal" href="#createModal">create group chat</a>
<!-- Modal -->
<div class="modal fade" id="createModal" 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>
</li>
When I click on the anchor tag for create group chat, the background blacks out but the actual dialog box does not appear. My website has another Bootstrap Modal that load when the page first loads, so I am not sure if this problem is being caused by a naming conflict. This Modal is named createModal and the other one I am using is called myModal
Try moving the modal outside of the li element.
Also, to get the fiddle working, you just need to add the external references to bootstrap.
I'm implementing a Bootstrap HTML application that using Modal as confirm dialog, and it could be a modal inside another one. For example I open modal, then I click something on that modal, the first one will be hidden, and open another modal.
From Bootstrap 3.3.6, they are supporting to add a margin-right automatically, and hide the vertical scroll bar, however once the second modal is opened, the scroll bar is not disappeared, and if I close and open again these modals several times, the margin-right will be increased from 17px to 17x2px, and 17x3px ...
I don't know how to solve that problem with Bootstrap modal, or any workaround, I'm also thinking about Angular that keep only 1 modal, and change the modal content (including header, body, and footer), and each modal will be introduced in a separated HTML template, and angular will load a particular template for each modal, but I'm not have much experience with these workaround with Angular.
Here is the sample page that I created for my problem, the page had long content, with Open Modal button, click to open first modal, then click on Open Second Modal to dismiss the first one and open the second one. If you do that several time, you can see that the margin right is increased, and a white line at the right.
http://plnkr.co/edit/iUuWaSvgDcaKQPTp1Yb2?p=preview
You have written data-dismiss and data-target on one click itself, which is not wrong but internally bootstrap modal has an animate function which takes its own time (appx 500ms). So it would be better if you control it through jqyery.
see below code.
$("#secondModal").click(function(){
$("#firstModal").modal('hide');
setTimeout(function(){
$("#secondModal").modal("show");
},500)
});
The modal method is already integrated within the bootstrap.js which you use.
So it will not show your margin which occurs at runtime.
You can easily handle using stylesheet according bootstrap modal display once into another bootstrap modal.
<html>
<head>
<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>
<button type="button" class="btn btn-primary" id="myBtn">Click here</button>
<div class="modal fade modal-admin" 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">
<button type="button" class="btn btn-primary" id="modelbtn">Click here</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade " id="myModal1" 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" id='close' class="btn btn-default" data-dismiss="modal" ng-click=''>Close</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#close").click(function(){
$('.modal-admin').css('width', '500px');
});
});
$(document).ready(function(){
$("#modelbtn").click(function(){
$('.modal-admin').css('width', '200px');
$("#myModal1").modal();
$('#myModal1').css('margin-left', '200px');
});
});
</script>
</html>
I created a button that references a modal but it doesn't open the modal at all. This area of code isn't my realm, SQL is. This code actually lives in an SQL procedure that is called when interacting with a website.
Thoughts?
--Remove package item, Modal Popup
<div id="delete_btn_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class=modal-body>
<h3><font color="red" align="center">Are you sure?</h3></font></br>
<p>Deleting a package item will remove the entire package</br></br>
<button type="button" class="btnStyle" data-dismiss="modal">Close</button>
<button type="button" class="btnStyle" onclick=location.href="http://wowfestival.lajollaplayhouse.org/cart/precart.aspx?p=499">Delete Package</button>
</p>
</div>
</div>
</div>
--button
<button type="button" class="btnStyle" data-toggle="modal" data-target="#delete_btn_modal">Delete</button>
Seems you have not added bootstrap javascript
Your code is perfect and fine
Check the bootply for your code. : http://www.bootply.com/zOa8UJ4Vfb
Also check you you have jQuery included as well .
If not use below cdn for quick test.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Many people suggested to avoid using coldfusion UI tags such as cfwindow. Adam Cameron & Ray Camden created ColdFusion UI the Right Way at: http://static.raymondcamden.com/cfuitherightway/ so people can have the alternatives.
I need a popup window and I don't mind if I don't use ColdFusion UI tag cfwindow. All I need is when user click on a link, a pop up window show up.
The example given my Ray Camden is using a button instead of a link. I need a link to open up a popup because I want to give my users details explanation about certain thing within my paragraph so I can't use a button.
How can I change the button into a link on the example below, is it possible? I've tried manipulating it but it wasn't successful.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test1</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
</head>
<body>
<!--- I need to replace this button with a link, How can I do it? --->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!--- button ends here --->
<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">
<p>I have some content right here <cfoutput>#Now()#</cfoutput></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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
Use below code. Just make sure to set properly data-toggle and data-target attributes in your anchor tag
<a href="#" data-toggle="modal" data-target="#myModal">
Launch demo modal
</a>