I have a Modal with some contents on it. When i click the cancel button, I want to clear and reset the contents of the modal. But the problem i face is, When i click the cancel button and reopen the modal, the contents still remain on the Modal.
I have attached the image of the Modal:
Before clicking Cancel Button:
After Clicking Cancel Button and reopening the modal, the contents still remain inside modal from the previous time, the image below shows it:
I have attached the code below:
HTML:
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<div id="imagearea" class="imagearea">
<div class='dynamic_text' style='display:none;'></div>
<img class="modal-content" id="img01" src="fashion.jpg">
</div>
<div class="text_container">
<br>
<div class="img_text">
</div>
<div class="input_tag">
<span class="right_sec_text">Select a region from the picture</span>
<div class="error"></div>
<div class="tags" id ="tags"></div>
<div class="input_box">
<input type="text" name="tags" id="name_tag" class="input_textbox">
<button id="settag" class="btn_settag">Set Tag</button>
</div>
<div class="footer_btn">
<p><button class="btn_success" id="btn_add" value="add areas">Confirm Selection</button>
<p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
</div>
</div>
</div>
</div>
this is the code for the cancel button:
<p><button class="btn_cancel" onclick="$('#myModal').hide()">Cancel</button>
I have included this code :
Javascript:
$('.modal').on('hidden.bs.modal', function() { $(this).removeData(); });
Can someone help me to fix this problem to reset and close the modal window.
Related
semantic ui modal ptint using printjs library. but the result is not
correctly showing the expected modal print.
help ?
$(document).ready(function(){
$('#logIn').click(function(){
$('#modaldiv').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" rel="stylesheet"/>
<div id="modaldiv" class="ui modal">
<button type="ui button" id="button" onclick="printJS({ printable:
'modaldiv',type: 'html',showModal:true, printContainer:
true,copyTagClasses: true})">
Print
</button> //print button and printjs command active
<i class="close icon"></i>
<div class="header">
Profile Picture
</div>
<div class="content">
<div class="ui medium image">
<img src="img/bmw5.png">
</div>
<div class="description">
<div class="ui header">We've auto-chosen a profile image for you.</div>
<p>We've grabbed the following image from the <a href="#"
target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
<p>Is it okay to use this photo?</p>
</div>
</div>
<div class="actions">
<div class="ui black button">
Nope
</div>
<div class="ui positive right labeled icon button">
Yep, that's me
<i class="checkmark icon"></i>
</div>
</div>
</div>
<a class="item ui button" id="logIn">
<i class="user icon"></i> Log In
</a> // modal open login button
The issue printing this modal is not related to print.js. The modal has a negative margin-top applied style which is the cause of issue when printing it.
In this fiddle, you can test using the Print2 button, it will print another html element content inside the same modal, without any issues.
https://jsfiddle.net/crabbly/y8e4ga8p/
I have a layout that is using the Bourbon Refills UI elements and I have a question regarding modals. More specifically, I have a case where I need multiple modals opened at once.
So...this is what is supposed to happen: A user clicks on a button that opens a normal Bourbon Refills Modal. Within that modal, the user has the option to click on a button to open an additional settings modal.
Currently I have one main modal and one nested inside of it. Sadly, the nested modal is constrained within the bounds of the first in Webkit and Gecko browsers. On IE...it doesn't at all :(
Is there any other way of pulling this off with Refills? I was thinking...maybe assigning a click event to the button to open a second (separate) modal that would sit on top of the first in z-index order?
Thanks in advance for your help - any is appreciated.
<div class="modal">
<label for="modal-1">
<div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
</label>
<input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
<div class="modal-fade-screen modal-fade-a">
<div class="modal-inner">
<div class="modal-close modal-close-a" for="modal-1"></div>
<h2>Modal 1 Title</h2>
<label>Input Label</label>
<input value="Input" />
<!-- Begin Nested Modal 2 -->
<div class="modal">
<label for="modal-2">
<div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
</label>
<input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
<div class="modal-fade-screen modal-fade-b">
<div class="modal-inner">
<div class="modal-close modal-close-b" for="modal-2"></div>
<h2>Modal 2 Title</h2>
<label>Input Label</label>
<input value="Input" />
</div>
</div>
</div>
<!-- End Nested Modal 2 -->
</div>
</div>
</div>
OK, I figured it out. Admittedly, this threw me off a bit because these are not JS-powered modals, but instead they rely on the ability to style an an element based on a hidden checkbox and its sibling element (in this case: < label >)
Easy-peasy. All we need to do is separate the modals and assign the :checked state to the hidden checkbox of the modal we want to open. For example:
First, separate the modals as you normally would. Then in Modal 1, create the link/button you want to have users click to open Modal 2. For the sake of argument, we will give it an ID of #update.
<div class="modal">
<label for="modal-1">
<div href="#" class="btn modal-trigger">Modal 1 Trigger Button</div>
</label>
<input class="modal-state modal-state-a" id="modal-1" type="checkbox" />
<div class="modal-fade-screen modal-fade-a">
<div class="modal-inner">
<div class="modal-close modal-close-a" for="modal-1"></div>
<h2>Modal 1 Title</h2>
<label>Input Label</label>
<input value="Input" />
<a class="btn btn__active" id="update">Update</a> <!-- New Button to open Modal 2-->
</div>
</div>
</div>
<div class="modal">
<label for="modal-2">
<div href="#" class="btn modal-trigger">Modal 2 Trigger Button</div>
</label>
<input class="modal-state modal-state-b" id="modal-2" type="checkbox" />
<div class="modal-fade-screen modal-fade-b">
<div class="modal-inner">
<div class="modal-close modal-close-b" for="modal-2"></div>
<h2>Modal 2 Title</h2>
<label>Input Label</label>
<input value="Input" />
</div>
</div>
</div>
Now...write a little bit of jQuery to assign the :checked state to the appropriate modal.
$("#update").click(function() {
var modalTrigger = $("input#modal-2");
modalTrigger.prop("checked", !modalTrigger.prop("checked"));
});
Done. Now the second modal opens up correctly over the first. I just tested this and it works in most browsers (including IE9-11) since we're not doing anything different from the base refills modals.
I am building a survey application using bootstrap,in that i have two image buttons thumbs up and thumbs down on my page , when i click thumbs up button it should be selected and when i click on thumbs down button it should select this button but deselect the thumbs up button.and also want to validate that the user must select a button without selecting it should not process or navigate to other page.
My code for the button :
<div class="row">
<div class="col-md-10" align="left">
<h5> My products solve real world problems.</h5>
</div>
<div class="col-md-1">
<h4><button type="button" class="btn-link" value="0" id="like1" onclick="likeq1()" >
<span class="fa fa-thumbs-up" ></span>
</button></h4>
</div>
<div class="col-md-1">
<h4> <button type="button" class="btn-link" value="0" id="unlike1" align="right" onclick="unlikeq1()">
<span class="fa fa-thumbs-down" ></span>
</button></h4>
</div>
</div>
I have an app that display 5 div each containing a specific kind of data.
I would like to be able to show one of the div in a modal so that the user can see the data in bigger size.
This would be trigger by a button placed in the top right corner.
HTML
<div class="ui grid">
<div class="sixteen wide column center aligned">
IRM Website
</div>
<div class="sixteen wide column center aligned mediumBox"> <!-- DIV 1 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" dataset="pluviometre" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 2 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 3 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 4 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 5 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
The modal need this javascript to be shown
$('.ui.modal').modal('show');
The idea is that each button triggers a function inside my controller
vm.maximizeData = function(){
$('.ui.modal').modal('show');
}
But how can I display the correct div inside the modal ?
As your question says you want to show a data of particular clicked element into the modal dynamically.
Use a selector to have parent child for click function
Get the content of respective / closest / next DIV content that you want to show in modal as bigger data.
Set the modal content and then show it.
HTML
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
Jquery
$(document).ready(function(){
//Button click
$('.mainBox .smallBox .buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('.divContent').html();
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
$('.modal').modal('show');
});
});
FYI, This is just an example, you may need to change variable names as per your need.
$(document).ready(function(){
//Button click
$('.buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('div.divContent').html();
console.log(contentToSet);
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
//$('.modal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content1</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content2</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
I am new to jQuery. I am trying to create a search box functionality in my project. I have created a div which contains names of cities, and I want it to be displayed on the click event of a button. I am able to hide and show that div using slideToggle() method of jQuery on the click event of a button.
But when div is displayed, then other contents of my page gets distracted. I do not expect this behavior.
Here is my image before displaying that div:
and the following is an image of the page after div is displayed:
Now I want this div to be displayed as like popup, so that it won't distract other contents of the page.
Following is a code of my search box section in HTML:
<!--start SearchBox section-->
<section id="searchbox"style="background:white">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12">
<form style="">
<center>
<div id="SearchBoxBorder" style="background:white;border:2px solid #a1a1a1;border-radius:5px;margin-top:20px;width:800px;">
<table id="mytable" >
<td style="width:300px;background:white;">
<center> <div class="form-group">
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="I am looking for"
style="border-width:5px;background:white; margin-top:17px; margin-left:15px; margin-right:10px;width:300px;
border-style:solid;border-width:5px;border-color:#a1a1a1;font-family:Arial,Helvetica,sans-serif;height:42px; font-size:18px;">
</div></center>
</td>
<td style="width:50px ;text-align:right;background:white;"> <center><strong> in</strong></center> </td>
<td style="width:400px;background:white;">
<center>
<div class="input-group">
<input type="text" class="form-control" placeholder="in locality"
style="border-width:5px;background:white; margin-top:0px; margin-left:10px; margin-right:20px;width:;font-size:18px;
border-style:solid;border-width:5px;border-color:#a1a1a1;font-family:Arial,Helvetica,sans-serif;height:42px;">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownBtn"
style="background:white;border-top-width:5px;border-right-width:5px;border-bottom-width:5px;border-left-width:1px;
border-color:#a1a1a1;height:42px;border-radius:0px;text-align:center;color:black; margin-right:20px;">Select<span class="caret"></span></button>
<!--City dropdown -->
<div class="SearchCities">
<div id="outer" style="">
<div id="innerLeft" style="">
<h5 >North India:</h5>
<ul class="city" type="none";>
<li><a>Delhi</a></li>
<li><a>Agra</a></li>
<li><a>Shrinagar</a></li>
<li><a>Noida</a></li>
<li><a>Himachal</a></li>
<li><a>Patna</a></li>
</ul>
</div>
<div id="innerRight" style="">
<a class="close">×</a>
<h5>West India:</h5>
<ul class="city" type="none";>
<li><a>Mumbai</a></li>
<li><a>Pune</a></li>
<li><a>Nashik</a></li>
<li><a>Kolhapur</a></li>
<li><a>Osmanabad</a></li>
<li><a>Ahamdabad</a></li>
</ul>
</div>
</div><!--/outer-->
</div><!--/SearchCities-->
</div><!-- /btn-group -->
<button type="button" class="btn btn-primary" style="margin-right:20px;"><i class="icon-search" style="font-size:20px"></i> Search</button>
</div><!-- /input-group -->
</center>
</td>
</table>
</center>
</form>
</div><!--/col-lg-12-->
</div><!--/row-->
</div><!--/end of container-->
</section>
<!--End of SearchBox section-->
and following is my jQuery code:
$(document).ready(function(){
$(".SearchCities").hide();
$("#dropdownBtn").click(function(){
$(".SearchCities").slideToggle();
});
});
For more idea what I want to do visit :askme.com and see a search box at the top and click on rest of India.
So please can you help me to achieve this?
Thank you in advance.
You basically have three ways:
By hand: make the popup div floating and position it absolutely, then set top to 100% (this will make it look like a popup menu. Make sure the parent element has relative positioning.
HTML:
<div class="input-group" style="position: relative;">
<div class="SearchCities">
...
</div>
</div>
CSS:
.SearchCities {
float: right;
position: absolute;
top: 100%;
}
JS: No change required
Use jQueryUI's dialog plugin: as pointed out in nrsharma's answer you can use a jQuery plugin to make it look like a popup dialog.
$('.SearchCities').dialog({ autoOpen: false }); // Initialize dialog plugin
$('.SearchCities').dialog("open"); // Open popup
API Reference: http://api.jqueryui.com/dialog/
Examples: http://jqueryui.com/dialog/
Plugin download: http://jqueryui.com/download/
Use Bootstrap's dropdown component: it seems from your code that you're using bootstrap. You can easily use bootstrap dropdowns or modals.
Bootstrap modals are popup dialogs just like jQueryUI's dialog plugin, but they look better and they're much more customizable. Have a look there for an example: http://getbootstrap.com/javascript/#modals
Bootstrap dropdowns are simple dropdown menus, but with a bit of hacking you can put anything inside them.
All you need is a bit of HTML (no JavaScript):
<div class="input-group dropdown">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" id="dropdownBtn" role="button">...</button>
<div class="dropdown-menu SearchCities" role="menu">
...
</div>
</div>
To make this work you also need to include Bootstrap js plugins (bootstrap.js/bootstrap.min.js).
Reference: http://getbootstrap.com/javascript/#dropdowns
Here you can do this easily
HTML
<div class="dialogbox"> This is Dialogue box</div>
<a id="click">click here</a>
CSS
.dialogbox{width:100px; height:100px; background:grey;display:none}
JQUERY
<script src="latest jquery library"></script>
<script>
$(document).ready(function(){
$("#click").click(function(){
$(".dialogbox").toggle();
});
});
</script>
You can do it easily with a jQuery UI dialog.
HTML:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The
dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
JavaScript/jQuery:
$(function() {
$( "#dialog" ).dialog();
});
More information can be found here.