Jquery - How to use a href link to call a dialog

Asked

Viewed 706 times

0

I need a command that opens a dialog every time I click a link...

    <map name="Mapeamento">
    <div id="dialog" title="Imagem1">
            <p>Informação 1</p>
            <p>Informação 2</p>
            </div>
            <script>
            $( "#dialog" ).dialog({autoOpen: false});
            </script> <area shape="poly" coords="1020,240,1000,225,1020,210,1040,215" href="ABRIR A DIALOG APARTIR DAQUI">

I tried things like: href="Image 1", for example, but nothing worked.

I have to use the href command because I am using the image mapping function. I’ve searched a lot of places, but none of them said how to transfer an area determined by area Shape in a link that opens a dialog box... Thanks in advance!

jquery html dialog

  • And each link must have a different behavior or simply open the same dialog with the same content?

  • That’s right, all positions use a dialog, but they will be different...

  • They all use the same dialog #dialog?

  • No, they can be #dialogImagem1, for example.

  • And where does this information from each content come from?

  • comes from a div: <div id="dialog" title="Imagem1"> <p>Information 1</p> <p>Information 2</p> </div> The code is working fine, it displays the right box, but it appears as soon as I refresh the page, I need it to appear when the person clicks on the coordinates

  • you can give an example of html with two links and the respective content/Divs where the modal should fetch content?

  • <map name="Mapping"> <div id="dialogExemplo1" title="Imagem1"> </div><script> $( "#dialog" ).dialog({autoOpen: false}); <div id="dialogExemplo2" title="Imagem2"> <script>$( "#dialog" ).dialog({autoOpen: false});</script> <area Shape="Poly" coords="1020,240,1000,225,1020,210,1040,215" href="OPEN THE DIALOGEXEMPLO1 FROM HERE"> <area Shape="Poly" coords="870,530,820,530,885,474,890,500" href="ABIR DIALOGEXEMPLO2 APARTIR DAQUI" >

Show 3 more comments

1 answer

1

Swap true for false:

$("#dialog").dialog({autoOpen: false});

Just viewing as true:

$(document).ready(function() {
  $("#dialog").dialog({autoOpen: true});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<map name="Mapeamento">
  <div id="dialog" title="Imagem1">
    <p>Informação 1</p>
    <p>Informação 2</p>
  </div>
  <area shape="poly" coords="1020,240,1000,225,1020,210,1040,215" href="ABRIR A DIALOG APARTIR DAQUI">

Browser other questions tagged jquery html dialog

You are not signed in. Login or sign up in order to post.