Kotak Dialog jQuery
Saya mencoba membuat kotak dialog dengan jquery. Dalam kotak dialog ini saya akan memiliki syarat dan ketentuan. Masalahnya adalah kotak dialog hanya ditampilkan untuk PERTAMA KALI.
Ini adalah kodenya.
JavaScript:
function showTOC()
{
$("#TOC").dialog({
modal: true,
overlay: {
opacity: 0.7,
background: "black"
}
})
}HTML (a href):
<a class="TOClink" href="javascript:showTOC();">View Terms & Conditions</a>
<div id="example" title="Terms & Conditions">1..2..</div>Masalahnya menurut saya adalah ketika Anda menutup kotak dialog, DIV dihancurkan dari kode html sehingga tidak pernah dapat ditampilkan lagi di layar.
Bisakah Anda membantu!
Terima kasih
Saya mengalami masalah yang sama (dialog hanya akan terbuka sekali, setelah ditutup, dialog tidak akan terbuka lagi), dan mencoba solusi di atas yang tidak memperbaiki masalah saya. Saya kembali ke dokumen dan menyadari bahwa saya memiliki kesalahpahaman mendasar tentang cara kerja dialog.
Perintah $('#myDiv').dialog() menciptakan/membuat dialog, tetapi bukan cara yang tepat untuk membuka dialog tersebut. Cara yang tepat untuk membukanya adalah dengan menginstansiasi dialog dengan dialog(), kemudian gunakan dialog('open') untuk menampilkannya, dan dialog('close') untuk menutup/menyembunyikannya. Ini berarti anda mungkin ingin mengatur opsi autoOpen ke false.
Jadi prosesnya adalah: instantiate dialog pada dokumen yang siap, lalu dengarkan klik atau tindakan apa pun yang Anda inginkan untuk menampilkan dialog. Maka itu akan bekerja, dari waktu ke waktu!
<script type="text/javascript">
jQuery(document).ready( function(){
jQuery("#myButton").click( showDialog );
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World',
overlay: { opacity: 0.5, background: 'black'}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}
</script>
</head>
<body>
<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
<p>I am a modal dialog</p>
</div>
Sepertinya ada masalah dengan kode yang Anda posting. Fungsi Anda untuk menampilkan T&C mereferensikan id div yang salah. Anda harus mempertimbangkan untuk menetapkan fungsi showTOC ke atribut onclick setelah dokumen dimuat juga:
$(document).ready({
$('a.TOClink').click(function(){
showTOC();
});
});
function showTOC() {
$('#example').dialog({modal:true});
}Contoh yang lebih ringkas yang mencapai efek yang diinginkan menggunakan dialog jQuery UI adalah:
<div id="terms" style="display:none;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<a id="showTerms" href="#">Show Terms & Conditions</a>
<script type="text/javascript">
$(document).ready(function(){
$('#showTerms').click(function(){
$('#terms').dialog({modal:true});
});
});
</script>
Saya memiliki masalah yang sama dan sedang mencari cara untuk menyelesaikannya yang membawa saya ke sini. Setelah meninjau saran yang dibuat dari RaeLehman, hal itu membawa saya ke solusi. Inilah implementasi saya.
Dalam acara $ (dokumen).ready saya, saya menginisialisasi dialog saya dengan autoOpen disetel ke false. Saya juga memilih untuk mengikat event klik ke elemen, seperti tombol, yang akan membuka dialog saya.
$(document).ready(function(){
// Initialize my dialog
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK":function() { // do something },
"Cancel": function() { $(this).dialog("close"); }
}
});
// Bind to the click event for my button and execute my function
$("#x-button").click(function(){
Foo.DoSomething();
});
});Selanjutnya, saya memastikan bahwa fungsi tersebut didefinisikan dan di situlah saya menerapkan metode buka dialog.
var Foo = {
DoSomething: function(){
$("#dialog").dialog("open");
}
}Ngomong-ngomong, saya menguji ini di IE7 dan Firefox dan berfungsi dengan baik. Semoga ini membantu!
