To be quick I would like to create something like this here:
https://coderwall.com/p/wjz4xa
Important: This link above links to a single modal page. If you visit https://coderwall.com you can click on one of the posts and you will see the modal appearing.
I dont want you to write any code for me. I would just like to have some tips on how to go about this. I am not even sure what to look for on google.
I am used to for instance the bootstrap modal but I am not sure whether using this will help me come close to the example on coderwall. Furthermore, bootstrap does not feature having a specific URI to link to one single modal.
It would be great, if you could just give me some quick tips on this topic.
Thank you very much.
just add a opaque background color to your modal
background-color: rgb(0,0,0);
<div class="modal fade" style="background-color:rgba(0, 0, 0, 1)">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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 -->
and when having the static 'modal' page copy the modal's style
Related
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>
I am trying to create a form inside a modal dialog, it's working if I don't identify a modal size, but if I go to this page: http://getbootstrap.com/javascript/#modals and copy large size modal dialog code, and put my form inside it, the design will be wrong, and the form will be stuck at the top and right borders.
Here's a JS fiddle of the form itself: https://goo.gl/wsnwm8
Thanks.
FORMAT for bootstrap modal
<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">Modal title</h4>
</div>
<div class="modal-body">Modal Body</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
`
Enclose your form inside modal-body
like below
<div class='modal-body'><form ><form></div>
Demo
Put a container class in your modal-content and everything will look just right.
<div class="modal-dialog modal-lg">
<div class="modal-content container">
<!-- form content goes here -->
</div>
</div>
JsFiddle
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>
Ripping my hair out on this one!
We are using an ad company that serves out their ads by embedding an iFrame within a div element.
All is working, but then I was asked to create a pop-up.
The pop-up also works, but the z-index is not correctly set.
Within the div element of the ad is a div that has the z-index property set to 9999 and the position set to absolute.
The code I am using to make the pop-up display is:
$('#questions').modal({
backdrop: 'static' }, 'show');
The HTML for the modal pop-up is as follows:
<!-- modal content -->
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog" style="width:960px;">
<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">Tenant Information</h4>
</div>
<div class="modal-body" style="min-height:500px;">
Something Goes Here
</div>
<div class="modal-footer">
<button onclick = "recordDoNotShow();" type="button" class="btn btn-default">Don’t show this message again</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Sometimes, this code works fine, then others the ad sits on top.
I am building my website using Twitter Bootstrap. I found that my dialog shows "2 times". Here is a video for you if you don't know what am I talking about(expire in 7 days).
Watch this video
Note: I only clicked the Close button one time. You can see there is a dialog appeared about I clicked Close and it disappeared in less than 1 second.
Here is my code.
<div class="modal fade" id="contactModel" tabindex="-1" role="dialog">
<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">Contact</h4>
</div>
<div class="modal-body">
<p id="modelText">Thank you! Your submission has been received!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My button calls JavaScript.
<button onclick="submitForm()" type="button" id="submit" class="btn btn-primary">Send</button>
My JavaScript
$('#contactModel').modal('show');
Can anyone help me to solve this? Thanks in advanced.
I don't see your button's code, but I guess you've been using the bootstrap modal in both ways : via data attributes and via js.
Choose one. Look here http://getbootstrap.com/javascript/#modals in "Usage".
Anyway, if it's not the button, then your code works well. here is a proof: http://www.bootply.com/eYXtmm6Yrr.