You could use jquery ui dialog, or, if you want to get more ...fancy, you could use fancybox:

$(document).ready(function() {
    $("a#inline").fancybox({
		'hideOnContentClick': true
	});
  
  
});

.btn{
  border: 1px solid #006; 
  color:#01ACEE; 
  font: bold 16px Tahoma; 
  border-radius:7px; 
  padding:4px;
  
  }

<link rel="stylesheet" href="http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://dodsoftware.com/sotests/fancy/jquery.mousewheel-3.0.4.pack.js"></script>

<a id="inline" class="btn" href="#data">My Button</a>

<div style="display:none">
    <div id="data">
    <img alt="" src="http://farm9.staticflickr.com/8366/8483546751_86494ae914_m.jpg"><br>
        <h3>My Cool Title</h3>
        <p>Put your cool item descrtiption here</p>
   </div>
</div>

You basically have three ways:

1. 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

2. 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/

3. 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 is a fiddle that actually does what you want - http://jsfiddle.net/WGPhG/6/

JS

function popUp(){
    var popup = document.createElement('div');
    popup.className = 'popup';
    popup.id = 'test';
    var cancel = document.createElement('div');
    cancel.className = 'cancel';
    cancel.innerHTML = 'close';
    cancel.onclick = function (e) { popup.parentNode.removeChild(popup) };
    var message = document.createElement('span');
    message.innerHTML = "This is a test message";
    popup.appendChild(message);                                    
    popup.appendChild(cancel);
    document.body.appendChild(popup);
}

NOTES

To set the class on an element you use element.className instead of element.class. For the onclick event handler on the cancel element, it is better to directly assign the onclick handler with an anonymous function that does what you need as in my example above.

EDIT (More Efficient Way)

This is actually a much better of getting the results that you want because there is no overhead involved with recreating the elements every time the popup is shown. Fiddle - http://jsfiddle.net/WGPhG/7/

CSS

.popup
{
    position:absolute;
    top:0px;
    left:0px;
    margin:100px auto;
    width:200px;
    height:150px;
    font-family:verdana;
    font-size:13px;
    padding:10px;
    background-color:rgb(240,240,240);
    border:2px solid grey;
    z-index:100000000000000000;
    display:none
}

.cancel
{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
}

HTML

<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
    This is a test message
    <div class="cancel" onclick="closePopup();"></div>
</div>

JS

function openPopup() {
    document.getElementById('test').style.display = 'block';
}

function closePopup() {
    document.getElementById('test').style.display = 'none';
}

Give an ID to uniquely identify the button, lets say myBtn

// when DOM is ready
$(document).ready(function () {

     // Attach Button click event listener 
    $("#myBtn").click(function(){

         // show Modal
         $('#myModal').modal('show');
    });
});

JSFIDDLE

DEMO

In the content area you can provide whatever you want to display in it — using the following code from https://gist.github.com/westonwatson/3914027 that I have copied in here:

.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}

<html>

<head>
  <title>LIGHTBOX EXAMPLE</title>
</head>

<body>
  <p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
  </p>
  <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
  </div>
  <div id="fade" class="black_overlay"></div>
</body>

</html>

Changes

div#main has been changed to dialog#main. <dialog> is a built-in HTML tag and is normally hidden unless it has the open attribute or has been opened by one of it's methods either .showModal() or .show(). .showModal() is what you'd be interested in because there's a special CSS property that only applies to fullscreen backgrounds or a dialog's backdrop -- it's appropriately called ::backdrop (see CSS of example).

Added 2 buttons one to close the <dialog> and another to open it.

Added a flag which is true to start out at then once the <dialog> opens that button generating function starts and then that flag is set to false. I had to stop it because I'm not sure if you wanted it to keep making buttons every time the <dialog> opens or not. Anyways, the flag is easily removed or you could adjust the conditions in which the flag is set to.

const modal = document.querySelector(".smallFrame");
const show = document.querySelector('.show');
const hide = document.querySelector('.hide');

let flag = true;
show.onclick = popUp;
hide.onclick = e => modal.close();

function popUp(e) {
  modal.showModal();
 
  if (!flag) {
    return;
  }
  let tempCounterBtn = 0;
  for (let i = 0; i < 2; i++) {
    let newDiv = document.createElement("div");
    newDiv.id = "div-" + (i + 1);
    modal.appendChild(newDiv);
    for (let x = 0; x < 6; x++) {
      let btn = document.createElement("button");
      btn.id = "button-" + (tempCounterBtn + 1);
      tempCounterBtn++;
      newDiv.appendChild(btn);
    }
  }
  flag = false;
}

html {
  font: 300 2ch/1.25 'Segoe UI'
}

body {
  display: flex;
  justify-content: center;
  margin: 1.2em;
}

button {
  background: rgba(0, 0, 0, 0);
  color: #a5afaa;
  border: 1px solid white;
  border-radius: .6em;
  padding: 3em;
}

button:hover {
  border-color: #fff8cc;
  box-shadow: 0em 0em 1em 0em yellow;
}

#main {
  border: solid 2px #939388;
  border-radius: 10px;
  background-color: #0f0f3de8;
  box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}

#main::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.inner {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.smallFrame {
  border: solid 2px #939388;
  border-radius: 10px;
  background-color: #0f0f3de8;
  box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
  width: 400px;
  height: 250px;
}

.hide {
  padding: 0.5em;
  float: right;
}

.show:hover,
.hide:hover {
  border-color: #fff8cc;
  box-shadow: 0em 0em 1em 0em lime;
  cursor: pointer;
}

<div id="main">
  <div id="inner-15" class="inner"></div>
</div>
<button class='show'>Show</button>

<dialog class="smallFrame">
  <button class='hide'>Close</button>
</dialog>

You can use jQuery UI like this:

JS:

$(function(){
        $('.profile1').on("click", function(e){
            e.preventDefault()
            $('.picture').dialog({
            width: 600,
            height: 'auto',
            modal:true,
            title: 'Picture',
            overlay: { backgroundColor: "#000", opacity: 0.9 }
            })
        })
       })

HTML:

<div class="box"> 
 <div class="box"> <div class="profile1"> 
  <p class="name">NAME</p>
 </div>
 <div class="picture">Photo Here...</div>

</div>

CSS for ".picture":

.picture{
    display:none;
    width:30%;
    height:30%;
}

And don't forget to include jQuery UI in addition to jQuery and the jQuery UI CSS:

jQuery: <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

jQuery UI:<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

CSS: https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css(you should download this CSS, not link to CDN)

JSFiddle: https://jsfiddle.net/91k8xa22/

JavaScript code should be wrapped with the <script> tag. CSS code should be wrapped with the <style> tag inside the <head> tag (although not mandatory).

The HTML you should be using is this:

<html>
<head>
<style>
.center {
    margin: auto;
    width: 60%;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hideform {
    display: none;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center hideform">
    <button id="close" style="float: right;">X</button>
    <form action="/action_page.php">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</div>
<button id="show">Show form</button>
<script>
$('#show').on('click', function () {
    $('.center').show();
    $(this).hide();
})

$('#close').on('click', function () {
    $('.center').hide();
    $('#show').show();
})
</script>
</body>
</html>

If I'm not wrong, jQuery core doesn't have any method to show a modal\pop up.

You can achieve your request in vanilla JavaScript in this way:

<a id="picture1" data-id="1" href="#" onclick="showDialog(this);">
    <!-- your img or whatever -->
</a>

<dialog id="pictureDialog">
    <!-- your dialog content -->
</dialog>

<script>
    function showDialog(element) {
        var id = e.getAttribute("data-id");
        //do some setup for your dialog
        document.getElementById("pictureDialog").showModal(); 
    } 
</script>

Remaining in jQuery family, You can simply open a modal using jQuery UI: http://api.jqueryui.com/dialog

Or adding a framework of your flavor, like Bootstrap: http://getbootstrap.com/javascript/#modals

Not sure what you want exactly as your output, but the correct way of doing the code is as below:

<h2>Popup</h2>

<div class="popup" onclick="myFunction('Harry Potter','Wizard')">
  <button> Try it </button>
  <span class="popuptext" id="myPopup">Ankit </span>
</div>

<p id="demo"></p>

<script>
// When the user clicks on div, open the popup
document.getElementById("myPopup").innerHTML= "Welcome " + name + ", the " + job + ".";
function myFunction(name,job) {

    var popup =document.getElementById("myPopup");
    popup.innerHTML = "Welcome " + name + ", the " + job + ".";
    popup.classList.toggle("show"); 
}
</script>

With respect to this code,

On clicking the "Try it" button, you will get a pop-up as "Welcome Harry Potter, the Wizard. ". The reason being you passed the values "Harry Potter" as name and "Wizard" as job onclick="myFunction('Harry Potter','Wizard')"

Now, in the function, you declared a variable named popup which stores the value from id "myPopup", which is in this case is "Ankit" right now

In the next line, we are changing the value to be "Welcome " + name + ", the " + job + ".", turning the line to be "Welcome Harry Potter, the Wizard". The value "Ankit" is lost.

popup.classList.toggle("show"); simply creates the pop-up.

If in case you wish to have "Ankit" as well in the pop-up, you may wish to try this snippet:

<div class="popup" onclick="myFunction('Harry Potter','Wizard')">
  <button> Try it </button>
  <span class="popuptext" id="myPopup"> Hi, I am Ankit. </span>
</div>

<p id="demo"></p>

<script>
// When the user clicks on div, open the popup
document.getElementById("myPopup").innerHTML= "Welcome " + name + ", the " + job + ".";
function myFunction(name,job) {

    var popup =document.getElementById("myPopup");
    popup.innerHTML = popup.innerHTML + " Welcome " + name + ", the " + job + ".";
    popup.classList.toggle("show"); 
}
</script> 

The popup will now show you as "Hi, I am Ankit. Welcome Harry Potter, the Wizard".

Hope this helps in some way :)