Adding More button/link

Hi , Below script is working nicely. Its giving me the xyz.com in the popup window nicely.
I just need to add another button for abc.com. How can I add? like below.

<button id="dialog_trigger">open abc</button>
<div id="dialog" style="display:none;" title="">
<iframe frameborder="0" scrolling="no" width="400" height="200" src="http://www.abc.com/index.html">
</iframe></div>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Box Witout Close Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>



</head>
<body>

<button id="dialog_trigger">open xyz</button>
<div id="dialog" style="display:none;" title="">
<iframe frameborder="0" scrolling="no" width="400" height="200" src="http://www.xyz.com/index.html">
</iframe></div>




<script>
$( "#dialog_trigger" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
$("#dialog").dialog({
    autoOpen: false,
    position: 'center' ,
    title: '',
    draggable: false,
    width : 432,
    height : 300, 
    resizable : false,
    modal : true,
});


</script>
</body>
</html>

Hi, you can do it like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dialog Box Witout Close Button</title>
    <link href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet">
    <style>.dialog{display: none;</style>
  </head>
  <body>
    <button class="dialog_trigger" data-id="1">Open Site 1</button>
    <div class="dialog dialog-1">
      <iframe frameborder="0" height="200" scrolling="no" src="http://www.duckduckgo.com" width="400"></iframe>
    </div>

    <button class="dialog_trigger" data-id="2">Open Site 2</button>
    <div class="dialog dialog-2">
      <iframe frameborder="0" height="200" scrolling="no" src="https://www.noisli.com/" width="400"></iframe>
    </div>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <script>
      $(".dialog_trigger").click(function() {
        var id = $(this).data("id");
        $( ".dialog-" + id).dialog( "open" );
      });

      $(".dialog-1, .dialog-2").dialog({
        autoOpen: false,
        position: 'center' ,
        title: '',
        draggable: false,
        width : 432,
        height : 300,
        resizable : false,
        modal : true,
      });
    </script>
  </body>
</html>

You specify which dialog to open as a data attribute on the button. That way, you can add as many buttons as you desire.

1 Like

thanks dear, i will try it now.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.