I am learning how to create custom dialog box in HTML by following tutorials but haven't been able to quite understand how I can create them the way i want. I want to achieve something like below:
The first one I want to create contains a listview.
The second one is dialog box that has textbox to enter in keyword and add to database by clicking create.
I have followed tutorials but being a beginner, I haven't be able to full understand how to go about create, therefore any help would be nice.
Through searching online, I have been able to create using modals to come up with: http://jsfiddle.net/jLs8myoa/9/
<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">Input Form</h4>
</div>
<div class="modal-body">
enter keyword <input type="textbox" id="textbox1"> </input><br>
<button type="button">Search</button>
<div> Listview </div>
</div>
</div>
</div>
</div
Few tutorials i have followed
https://www.w3schools.com/howto/howto_css_signup_form.asp
https://www.youtube.com/watch?v=-RLE2Q7OzME
In your code modal opens properly, I can't see any problem over there.
You just need to advance a bit in HTML, and CSS.
Start with W3 schools, they have awesome and easy tutorials for HTML5 and CSS. I think you will be able to make what you want once your basic will be clear. There are many ways to design the modal you are making.
Follow this...
CSS Tutorials...
Custom modal without Bootstrap...
CSS modal...
Related
I am showing notifications on modal with ajax call, ajax and php code is fine, It shows notifications on modal only first time, on second click at anchor it does not load "modal-dialogue" div and "modal-content" but it loads "modal fade modal-form in" div. When I debug it I saw display none on both above div's I know I can handle them with javascript, but I think that's not the solution.
What I am missing there, please guide
<a class="flag-list" href="#" data-toggle="modal" data-target="#user-flag">
<i class="icon-flag6"></i>' . esc_html__( 'Flag as inappropriate' ) .
</a>
<div class="modal fade modal-form" id="user-flag" tabindex="-1" role="dialog">
<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>
<h3 class="modal-title" id="flagModalLabel">
<?php echo esc_html__( 'Flag' ); ?>
</h3>
</div>
<div class="modal-body">
<form id="cs_flag_user">
<input type="hidden" name="name_one">
<input type="hidden" name="name_two">
<textarea></textarea>
</form>
</div>
</div>
</div>
</div>
It seems you may have a problem in server side, the code in your page, or any form submissions which changed may be the DOM, It will be easier to open the console and figure out exact problem.
A full demo for your code is running in Codepen here. I just replaced your php code with simple text, check it and leave your comment in case you need more help.
If you need to work with modal windows easily, I already wrote and open sourced modal windows wrapper plugin based on bootstrap4, you can find also demos and how to use here.
Try avoiding data-toggle="modal" data-target="#user-flag"
and use jquery to display and hide modals.
If notifications are loaded via ajax, then display modal inside success of that ajax.
I am trying to make a Javascript JQuery registration form pop-up on link click.
So I have this button:
REGISTER NOW
And I`m trying to make it pop-up a small simple html registration form that I can store in a hidden registration DIV. Example:
<div name="reg" style="visibility:hidden;">reg form</div>
I just need the simple registration form (Only full name and email) to pop-up (centered and mobile responsive) when that button is linked.
Can I get any help in doing this? Thank you.
I have tried with jquery dialog and almost everything found on Google, but it doesn't seem to work.
Thanks.
As suggested by Mihailo, you could use Bootstrap Modals to make it responsive (mobile, tablet and PC).
<a data-toggle="modal" data-target=".bs-example-modal-sm" role="button" class="">Launch demo modal</a>
<div class="modal fade bs-example-modal-sm" id="myModal" 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">Registration</h4>
</div>
<div class="modal-body">
<form name="reg-form">
<div class="form-group">
<label for="user-name" class="control-label">Full Name:</label>
<input type="text" class="form-control" id="user-name">
</div>
<div class="form-group">
<label for="email" class="control-label">Email Address:</label>
<input type="text" class="form-control" id="email">
</div>
</form>
</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>
Here is the thing, there is a modal template with header section, body section and footer section.
div class="modal fade bs-example-modal-sm"
If you remove fade, then the modal will not animate.
More information regarding bootstrap modals is here
Also, Please find the corresponding JsFiddle below:
https://jsfiddle.net/Manoj85/7egtc2ne/5/
Hope this helps!!
You should really be using a class or id on you register div instead, but you can show the form like this:
$('.cta').click(function() {
$('div[name="reg"]').css('visibility', 'visible');
})
Once you give your div a proper class/id, you can replace div[name="reg"] with .class or #id. Additionally, jQuery has several built-in functions for hiding and showing elements. To use these, you'll want to change visibility:hidden; with display:none;. Then, in the code I presented above, replace .css(...) with one of the following:
.show() is an immediate effect, and is the same as changing the display property to block. To remove again, use .hide().
.fadeIn(), as the name suggests, is more of a gradual fading effect. Opposite of .fadeOut().
slideDown() is similar to an "accordian" effect, where the element starts at 0 height and "grows". Opposite of .slideUp().
You can also use .toggle(), .fadeToggle(), or slideToggle(), respectively to alternate between showing and hiding the elements.
I've created this JSFiddle to demonstrate these effects.
Assuming you have a div called register, which you need to add, it will be like this:
<script>
$(".cta").click(function() {
$("#register").css("hidden", false)
})
</script>
I have looked at a few questions on here that are having the same issue I am having, but I can not seem to resolve my issue.
I am wanting to display a modal in certain scenarios... So I will need to show/hide based on certain scenarios. This is what I have :
ASP.NET
<div class="modal fade" id="lockUser" runat="server" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Warning</h4>
</div>
<div class="modal-body">
<p>Watch out! Your about to be locked out.</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
function openModal() {
$('#lockUser').modal('show');
}
C#
ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
I have the C# code in a click event, everything in the event fires except for the above line...
Maybe I a missing something really stupid
Any suggestions?
First thing to do is make sure that the openModal() method works. If it does, then move the script files (bootstrap.min.js, etc.) and functions from the bottom of your page to inside <head>..</head>.
I'm currently working on a C# MVC application. I'm using Twitter's Bootstrap's modal boxes as a 'popup' window. This has worked flawlessly in the past, but for some reason it doesn't right now. The result I get right now is shown below. Don't mind the blur, I did that.
Naturally the background is supposed to get grey, faded out like always, though for some reason it doesn't right now. I've basically copy pasted the code that works elsewhere and changed the values. I double and triple checked to make sure I didn't make a mistake somewhere, but I honestly can't see it.
I've pasted the relevant code below. JQuery gets loaded in the layout file. This is a partial view for the record
<button id="btnAddNewSecureFolder" onclick="openTheCreateWindow()" data-toggle="modal" data-target="#modal-new-secFolder" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone">Add a secure folder</button>
#*<button onclick="openTheCreateWindow()" class="btn btn-md btn-default giveMeSomeSpace leaveMeAlone" id="btnAddNewSecureFolder">
Add a secure folder
</button>*#
<div class="modal" id="modal-new-secFolder" tabindex="-1" role="dialog" aria-labelledby="modal-new-secFolder" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cancel" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Add a new secure folder</h4>
</div>
<div class="modal-body">
#Html.Partial("CreateNewSecureFolder")
</div>
</div>
</div>
</div>
<script>
function openTheCreateWindow() {
$('#modal-new-secFolder').modal('show');
}
</script>
Check in Chrome Developer Tools if
<div class="modal-backdrop fade in"></div>
exists right before closing </body> tag.
Styles for this div:
Also try to remove
aria-hidden="true"
attribute from your modal dialog.
I am using jQuery bootstrap in my application. I have the following dialog box code:
<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">Share With Friends</h4>
</div>
<form class='shareForm' id='dialogForm' role='form'>
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Update page title</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<span class="help-block">Example block-level help text here.</span>
</div>
<div class="alert alert-danger">asahjk akshak shaks jhk</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I will use this dialog multiple times. Now I have two choice to use this:
I should keep all this code as string e.g var myDialog = above code in some js file and called that myDialog variable whenever I need.
I should generate above code dynamically every time it is called using something like $("<div/>").
Now I want to know what is the difference between these two in terms of performance, memory usage because what i am guessing that in first case it will consume memory more as it will be big string. In 2nd case creating everything dynamically will be a tedious job.
You could also investigate a HTML templating engine of which their are many. This has the added benefits of keeping your HTML markup out of your JavaScript logic, i.e no horrible long html in JavaScript variables that are hard to maintain, while still being able to reference the code from a JavaScript file that you can reference whenever you want. Not to mention being able to dynamically populate data without needing to recreate your HTML markup.
John Resig came up with a solution and great explanation several years ago which has since been expanded upon by many developers implementing their own templating solution. The Template Engine Chooser may help you in selecting a templating engine.
You could also just put it in a seperate file and include that whenever it is needed. That way you are not dependand on Javascript for this code.
Well, it's not just a small div, I would keep that in a hidden div on the page where you need it, and just change its visibility.
That's the simplest, most discoverable and readable way in my opinion, and you don't need to generate it every time...